Question

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

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

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

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

Answer 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中产生实际渐变。

Answer 2

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

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

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

这种方式不如具有渐变的方式灵活，但是！您可以肯定使用伪元素的渐变，从而更容易实现更多效果。

1 DIV的多种背景颜色

2 个答案: