身體上的背景顏色，其上有一個div

Question

我的身體使用顏色漸變，但是在它上面，我希望在整個網頁上有一個包裝（因爲垂直/水平對齊）。但是，由於這個div，背景不再可見。我試圖通過使用RGBA和不透明度來解決這個問題，但都沒有奏效。

鏈接的jsfiddle：https://jsfiddle.net/ItsKasper_/cnpczafL/ 代碼：

<div id='wrapper'> 
<div id='list'> 
    <p>test</p> 
</div> 
</div> 

CSS： 無法獲取CSS正確顯示。

在此先感謝

Answer 1

的body大小與內容，並作爲wrapper，唯一的直接孩子，定位絕對的，它的高度變得0，但html是全視

Fiddle

html { 
    background: #457fca; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left, #457fca, #5691c8); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #457fca, #5691c8); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #457fca, #5691c8); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #457fca, #5691c8); /* Standard syntax */ 
    margin: 0; 
} 

---

如果你給body的高度，height: 100vh;，它的工作以及

Fiddle

body { 
    height: 100vh; 
    background: #457fca; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left, #457fca, #5691c8); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #457fca, #5691c8); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #457fca, #5691c8); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #457fca, #5691c8); /* Standard syntax */ 
    margin: 0; 
} 

---

而且由於wrapper具有視口的大小，你當然可以設置背景就可以了

Fiddle

#wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background: #457fca; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left, #457fca, #5691c8); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #457fca, #5691c8); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #457fca, #5691c8); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #457fca, #5691c8); /* Standard syntax */ 
}