div的多种背景颜色

Question

我有一个 div

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

我想有不同的背景颜色为同一div通过百分比(水平着色)

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

这可能与CSS有关吗？

Answer 1

您可以使用CSS3 Gradients ^[1]来实现此类效果

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

演示

你可以在这里创建这样的渐变

如果您正在寻找静态渐变宽度px,您也可以将其作为一个单元使用%

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

演示2 (垂直分割,只需更改to right为to bottom)

^{1. 有关CSS3 Gradients的更多信息       2. 浏览器支持}

Answer 2

您可以在父级中创建三个后代 div。绝对定位它们，使父级透明，然后将三个 div 的 z 索引设置为 0，以便它们位于文本下方，而不是顶部。