使用渐变但不混合颜色答案

【问题标题】：using gradient but without mixing color使用渐变但不混合颜色
【发布时间】：2015-03-18 07:17:53
【问题描述】：

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

还有渐变属性

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

结果到

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

这会导致

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

【问题讨论】：

标签： css linear-gradients

【解决方案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%);
}

【讨论】：

我已经知道这一点，但仍然不明白一件事：这是如何工作的？如果有人可以解释，那就太好了。因为我的脑袋不会想出什么来解释它:)

【解决方案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%);
}

您可以为白色设置任何值。它不会混合。

【讨论】：

【解决方案3】：

你的意思是：

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

&lt;div&gt; lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla&lt;/div&gt;

【讨论】：

【解决方案4】：

当你这样做时：

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

【讨论】：

【解决方案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 */

【讨论】：