本文介绍了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 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
Demo
(垂直拆分,只需将更改为右
到到底部
)
;
这篇关于div的多个背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!