1 DIV 上的多种背景颜色答案

【问题标题】：Multiple background colours on 1 DIV1 DIV 上的多种背景颜色
【发布时间】：2011-10-08 16:08:10
【问题描述】：

我有一个div，我想使用 CSS3 在其上水平应用 2 个背景，但我无法弄清楚，因此我将不胜感激！

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

我希望上半部分是一种颜色，下半部分是另一种颜色。

我知道使用图像可以很容易地做到这一点，但我就是不知道如何在不使用它们的情况下做到这一点。

【问题讨论】：

你可以在两个不同的 div 标签上设置height: 50%
你必须标记一个答案或者发布你自己的答案，只是一个建议.. :)

标签： html css

【解决方案1】：

渐变是使用 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%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */
    background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */
}

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

【讨论】：

似乎不适用于 IE7/8：/ 甚至不适用于 CSS3PIE

【解决方案2】：

除了渐变之外，实现这一点的另一种方法是使用伪元素：

http://jsfiddle.net/kizu/S3LXB/

将position: relative 和一些正数z-index 添加到元素，将负数z-index 添加到伪元素，它将被放置在元素的背景之上，但在元素的内容之下。然后你就可以按照你想要的方式定位。

这种方式不像渐变那样灵活，但是！您当然可以为伪元素使用渐变，从而更轻松地实现更多效果。

【讨论】：