Question

我的身体使用颜色渐变，但最重要的是，我希望在整个网页周围有一个包装器（因为垂直/水平对齐）。然而，由于这个div，不再能看到背景。我试图通过使用RGBA和Opacity解决这个问题，但它们都没有奏效。

链接到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 */
}

身体上的背景颜色，顶部有一个div

1 个答案: