使用渐变但不混合颜色

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

当你这样做时：

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% 到最后的白色。所以你只会得到黑色和白色，没有它们之间的渐变。

Answer 3

如果你不希望它们混合，为什么要首先使用渐变？

无论如何，这是有效的：

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

您可以为 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 6

根据：https://developer.mozilla.org/eUS/docs/Web/CSS/gradient/linear-gradient 你可以：

body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

身体 { 背景：线性渐变（ 向右， 红色（结束位置）％， 橙色（起始位置）％（结束位置）0％， 黄色（起始位置）％（结束位置）％， 绿色（起始位置）％（结束位置）％， （最终位置）80% ）； }