如何爲背景的特定部分設置顏色？

我目前正在嘗試爲我的頁面背景的特定部分設置背景顏色。這個想法是將頁面頂部的大約1/5或1/4作爲一種顏色，而整個剩餘底部則是一種單獨的顏色。我已經考慮使用漸變來完成它，但我不知道如何通過CSS3設置特定的停止部分。如何爲背景的特定部分設置顏色？

有關我如何使用CSS3完成此任務的任何想法？

來源

2015-05-19 CloudTwoNJ

使用gradient generator

html, body { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: #fb83fa; 
 
    background: -moz-linear-gradient(top, #fb83fa 25%, #7ceacd 25%, #7ceacd 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#fb83fa), color-stop(25%,#7ceacd), color-stop(100%,#7ceacd)); 
 
    background: -webkit-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
    background: -o-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
    background: -ms-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
    background: linear-gradient(to bottom, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
}

或者你可以溝梯度和使用僞元素...

html, body { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: #7CEACD; 
 
} 
 

 
body:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 25%; 
 
    background: #fb83fa; 
 
}

來源

2015-05-19 17:59:13 Turnip

我能否使用第一個選項將頁面頂部20％處的顏色融合到底部％80中，類似於使用漸變？我試圖在梯度發生器中重新創建我的想法，但對於我正在做的事情有點失落。 – CloudTwoNJ

是否這樣？ http://www.colorzilla.com/gradient-editor/#fb83fa+25,7ceacd+100;Custom – Turnip

非常多。顏色和位置需要一些切換，但我已經處理了。謝謝！ – CloudTwoNJ

您可以使用單獨的div來表示不同的部分，然後使用height：20vh來表示當前視圖高度的20％。

.top { 
    background-color: blue; 
    height: 20vh; 
} 

.bottom { 
    background-color: red; 
    height: 80vh; 
}

http://jsfiddle.net/goerfjyf/1/

我也包括一個div容器來保存您的內容因爲身體通常不會以同樣的方式基本上作用的其餘部分。

來源

2015-05-19 17:58:43 UsainBloot

不需要計算停靠點，您可以使用只有2種相同顏色的漸變，並使用background-size來設置其高度。

html,body{ 
    height:100%; 
} 
body{ 
    background:linear-gradient(0deg,#f00,#f00) no-repeat; 
    background-size:100% 25%; 
}

來源

2015-05-19 18:13:14 Shaggy

如何爲背景的特定部分設置顏色？

回答

相關問題