javascript - div的多种背景颜色

Question

我有一个 div

<div class="test">
   Some text
</div>

我想为同一个 div 设置不同的背景颜色 百分比(水平着色)

-----------------------------
| 20%   |  30%   | 50%      |
| Red   | Yellow | Green    |
-----------------------------

这可以用 CSS 实现吗？

Answer 1

您可以使用 CSS3 渐变^[1] 来实现这样的效果

div {
    background: linear-gradient(to right,  #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
    height: 400px;
}

Demo

您可以在 here 上创建此类渐变

---

如果您正在寻找静态渐变宽度，您还可以使用 px 作为单位，以及 %

Demo ^{(如果您正在寻找跨浏览器解决方案，请添加browser-prefixes，我没有在这个演示中添加所有规则)}

Demo 2 (垂直拆分，只需将 to right 更改为 to bottom)

^{1。 More on CSS3 Gradients} <补充>2。 Browser Support