div的多个背景颜色 [英] Multiple background color for div

问题描述

我有一个 div

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

我想为同一个<$ c>使用不同的背景颜色 $ c> div 由％（横向着色）

I would like to have different background color for the same div by percent (Horizontal coloring)

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

这是否可以使用CSS？

Is this possible with CSS?

推荐答案

> [1] 以达到这样的效果

You can use CSS3 Gradients^[1] to achieve such effect

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

演示

您可以通过此处

px 作为一个单位，以及％，如果您正在寻找静态渐变宽度

You can also use px as a unit, along with % if you are looking for static gradient widths

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

Demo ^{(Please add browser-prefixes if you are looking for a cross browser solution, I've not added all the rules in this demo)}

演示2 （垂直拆分，只需将更改为右到到底部）

^{1。 更多CSS3渐变}    ;    
^{2。 浏览器支持}

这篇关于div的多个背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！