本文介绍了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的多个背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 15:32
查看更多