多個垂直背景顏色CSS3

試圖創建一個解決辦法，讓我有五個多種背景顏色，無論寬度，填補了網頁。我設法用5個div標籤做到這一點，但我想知道是否有可能完全使用CSS3做到這一點？

我想結果是：

enter image description here

我已搜查和＃2網絡沒有任何結果，或者我只是在尋找非常糟糕。

2014-10-04 kexxcream

http://www.colorzilla.com/gradient-editor/ – loveNoHate 2014-10-04 19:53:06

請參閱http://stackoverflow.com/questions/6457406/can-i-apply-multiple-background-colors-with-css3 – dotfreelancer 2014-10-04 20:01:38

絕對使用漸變。 – webinista 2014-10-04 20:07:29

您可以使用linear-gradients來實現此目的。

Example Here

html, body { 
    height: 100%; 
} 
body { 
    background-image: linear-gradient(90deg, 
     #F6D6A8 20%, 
     #F5BA55 20%, #F5BA55 40%, 
     #F09741 40%, #F09741 60%, 
     #327AB2 60%, #327AB2 80%, 
     #3A94F6 80%); 
}

只需添加供應商前綴額外的瀏覽器支持

body { 
    background: -moz-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
    background: -webkit-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
    background: linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
}

瀏覽器支持，可以發現here。

來源

2014-10-04 20:08:45

好的，你的比我的好多了。投票！ – 2014-10-04 20:20:33

似乎沒有'html，body {height：100％; '也是。 [小提琴]（http://jsfiddle.net/s3vxknbd/5/） – webinista 2014-10-04 20:23:51

@ webinista是的，你說得對，它在大多數情況下都能正常工作，但是看看當你在''margin：0'身體'元素。 [（實施例）]（http://jsfiddle.net/qb04zz1o/）。添加'html，body {height：100％; }'將覆蓋大部分用例，[見]（http://jsfiddle.net/56phkasu/） – 2014-10-04 20:27:40

看看這個我做了一個這個。 http://jsfiddle.net/753gugpt/

我用linear-gradient CSS3屬性是這樣的：

#container { 
 
    width: 100%; 
 
    /*or 900px for example */ 
 
    overflow-x: hidden; 
 
} 
 
#exampleB { 
 
    width: 32700px; 
 
    height: 285px; 
 
    background-color: #a8e9ff; 
 
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#a8e9ff, endColorstr=#052afc); 
 
    background-image: -moz-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -webkit-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -o-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -ms-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #a8e9ff), color-stop(0%, #052afc), color-stop(12%, #485e69), color-stop(1%, #ff8d00)); 
 
}

<div id="container"> 
 
    <div id="exampleB"></div> 
 
</div>

也許這會爲你工作:)

來源

2014-10-04 20:14:05

正如我所說@Josh Crozier的解決方案比我的要好得多。但它仍然以一種方式工作！：）謝謝！ – 2014-10-06 08:32:40

多個垂直背景顏色CSS3

回答

相關問題