使用渐变但没有混合颜色

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{
    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 2

如果你不想让它们混合，你为什么要在第一时间使用渐变？

无论如何这是有效的：

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 3

你的意思是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以为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 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％到最后。这样一来，您只会得到白色和白色，而它们之间没有渐变。