使用渐变但不混合颜色

Question

我不知道这是一个愚蠢的问题还是类似的问题，但我希望 div 由一种颜色填充一定百分比，其余部分由另一种颜色填充。

和梯度属性

.div{
     background: linear-gradient(to right, #000 50%, #fff 50%);
}

结果为

.div{
     background: linear-gradient(to right, #000 28%, #fff 72%);
}

这导致

我想让白色和黑色在所有百分比上都不会混合和分开。

Answer 1

如果不想混合，为什么要首先使用渐变？

无论如何这是有效的：

div{
     height: 200px;
     background: -moz-linear-gradient(left, white 50%, black 0%);
     background: -linear-gradient(left, white 50%, black 0%);
     background: -webkit-linear-gradient(left, white 50%, black 0%);
}

你可以为白色输入任何值。它不会混合。

Answer 2

您可以为 Div 提供多重渐变颜色使用这个 Css

检查这个演示

http://jsfiddle.net/dineshkanivu/2pcccd2p/1/

http://jsfiddle.net/dineshkanivu/2pcccd2p/

   background: #ff474a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff474a 0%, #7a2e68 50%, #0cf900 51%, #0a0784 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff474a), color-stop(50%,#7a2e68), color-stop(51%,#0cf900), color-stop(100%,#0a0784)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff474a', endColorstr='#0a0784',GradientType=0 ); /* IE6-9 */

Answer 3

试试这个

.div{
    background: -webkit-linear-gradient(left, black 50%, white 0%);
    background: -moz-linear-gradient(left, black 50%, white 0%);
    background: -ms-linear-gradient(left, black 50%, white 0%);
    background: linear-gradient(left, black 50%, white 0%);
}

Answer 4

你是说：

div{
     background: linear-gradient(to right, #000 28%, transparent 28%, transparent 72%,#fff 72%);
  color:green
}
body {
  background:yellow
    }

<div> lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla</div>

Answer 5

你什么时候做的：

background: linear-gradient(to right, #000 28%, #fff 72%);

意思是：黑色 (#000) 从 0% 到 28%，然后开始渐变到白色 (#fff) 直到达到 72%，在此渐变之后，使用白色直到结束。

所以你可以使用：

background: linear-gradient(to right, #000 28%, #fff 28%);

这样你会得到：从 0 到 28% 的黑色，从 28% 到 28% 的渐变（这意味着没有渐变），以及从 28% 到最后的白色。所以你只会得到背面和白色，它们之间没有渐变。

使用渐变但不混合颜色

using gradient but without mixing color

css

linear-gradients