身体上的背景颜色，其上有一个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 */ 
}