html – 1 DIV上的多种背景颜色

发布时间：2020-12-14 18:44:13 所属栏目：资源来源：网络整理

导读：我有一个div,我想使用 CSS3将2个背景水平地应用到它上面,但我无法理解它,所以我将不胜感激任何帮助！ background: blue top no-repeat 10%; background: yellow bottom no-repeat 10%; 我希望上半部分是一种颜色,下半部分是不同的颜色. 我知道它可以很容易地

我有一个div,我想使用 CSS3将2个背景水平地应用到它上面,但我无法理解它,所以我将不胜感激任何帮助！

background: blue top no-repeat 10%;
    background: yellow bottom no-repeat 10%;

我希望上半部分是一种颜色,下半部分是不同的颜色.

我知道它可以很容易地用图像完成,但我无法弄清楚如何在不使用它们的情况下做到这一点.

解决方法

使用CSS3并且只有一个div,渐变是一种相当简单的方法：

http://jsfiddle.net/thirtydot/8wH2F/

是的,我骗了.这根本不是很简单,因为你需要使用相同的东西的无数不同的供应商前缀版本：

div {
    background: #000fff; /* Old browsers */
    background: -moz-linear-gradient(top,#000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#000fff),color-stop(50%,#ffff00),color-stop(100%,#ffff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,#ffff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,#ffff00 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top,#ffff00 100%); /* IE10+ */
    background: linear-gradient(top,#ffff00 100%); /* W3C */
}

我生成了CSS here,并删除了filter属性,因为它将导致IE6-9中的实际渐变.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!