1 DIV上的多个背景颜色

我有一个div，我想使用CSS3将2个背景水平地应用到它上面，但我无法弄清楚，所以我会很感激任何帮助！1 DIV上的多个背景颜色

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

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

我知道这可以很容易地完成图像，但我只是不知道如何做到这一点，而不使用它们。

来源

2011-10-07 HAWKES08

您可以在两个不同的div标签上设置'height：50％' – SNpn

您必须标记答案或发布自己的建议.. :) – Bhavik

渐变是一个相当简单的方法来做到这一点使用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中。

来源

2011-10-07 11:29:56 thirtydot

感谢您的完美 – HAWKES08

似乎无法使用IE7/8虽然：/甚至没有与CSS3PIE – miq

另一种方式来实现这一点，除了梯度，是使用伪元素：

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

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

这种方式不如具有渐变的那种灵活，但！您可以确定使用伪元素的渐变，因此可以更轻松地实现更多效果。

来源

2011-10-08 08:08:10 kizu

这有一个优点，它在IE8/9中工作。 – thirtydot

1 DIV上的多个背景颜色

回答

相关问题