Question

我制作了一个程序，根据一些数值生成一个包含2种背景颜色的div的HTML文档。我发现了linear-gradient，我的代码如下：

＆＃13;

div {
  width: 100%;
  height: 5%;
}

＆＃13;

<div style="background: linear-gradient(to right, red 40%, green 60%);">.</div>
<div style="background: linear-gradient(to right, red 60%, green 40%);">.</div>

＆＃13;

如何重写我的代码，以便在红色低于50％时我可以摆脱渐变外观？我不想为每种颜色制作2个不同的div，我想linear-gradient它对我来说不是最好的解决方案。我希望所有的div都看起来像第二个，无论颜色的百分比如何。

Answer 1

百分比不是颜色占据的空间，是元素中每种颜色的位置。您必须在两种颜色中设置相同的百分比才能获得纯色：

div {
width: 100%;
height: 5%;
}

<div style="background: linear-gradient(to right, red 40%, green 40%);">.</div>
<div style="background: linear-gradient(to right, red 50%, green 50%);">.</div>
<div style="background: linear-gradient(to right, red 30%, green 30% ,green 60%, blue 60%);">.</div>

颜色小于50％时去除渐变

1 个答案: