使用渐变但没有混合颜色

Question

我不知道这是一个愚蠢的问题还是类似的问题,但是我希望div用一种颜色填充某些百分比并且剩下其他部分.

和渐变属性

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

结果成

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

这导致了

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

Answer 1

当你这样做时：

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

Answer 2

试试这个

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