使用渐变但不混合颜色

Question

我不知道这是不是一个愚蠢的问题或者类似这样的问题，但我想让一个 div 用一种颜色填充特定的百分比，另外一部分用其他颜色填充。

而渐变属性

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

结果为

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

这导致了

我希望在所有的百分比上白色和黑色不要混合，而是分开。

- Suman KC

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%);
}

- GaurabDahal

---

我已经知道了，但仍然不明白其中的一个问题：这是如何工作的？如果有人能解释一下就太好了。因为我的头脑无法想出任何解释 :) - LuckyLuke Skywalker

Answer 2

当你执行：

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

这意味着：

从0%到28%使用黑色(#000)，然后渐变到白色(#fff)直到达到72%，在此渐变之后，一直使用白色直至结束。

因此，您可以使用：

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

这样做，你将获得从0到28％的黑色，从28％到28％的渐变（也就是说，没有渐变），以及从28％到结尾的白色。因此，您只会得到黑色和白色，它们之间没有渐变。

- Pedro Leite

---

请返回翻译后的文本内容 - jx12345

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%);
}

您可以对白色设置任何值，不会混淆。

- Sushovan

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> 

- G-Cyrillus

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

- Dinesh Kanivu