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上的多個背景顏色

回答

相關問題