Question

我在一个不幸的简单网站上遇到了令人不安的情况。

在右侧部分，整个容器应填充白色。然而，页面内容似乎正在删除 - 缺乏更好的词 - 背景。我尝试过利用z-index，background-color等无济于事。我哪里出错？

CSS

#container {
    height: 100%;
    width: 980px;
    margin: 0 auto;
}

#about, #services, #contact {
    background: rgba(246, 246, 246, 0.55) !important;
    float: right;
    height: 100%;
    margin-top: 100px;
    padding: 20px;
    width: 622px;
    z-index: -5000;
}

.left, .right {
    width: 300px;
}

.left {
    float: left;
    padding-right: 15px;
}

.right {
    float: right;
}

HTML

<div id="about">
<p>Hello. We are __.</p>
<ul class="stylists">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<p>Content ipsum</p>
</div><!-- end #about -->

Answer 1

那是因为您在页面上的几乎所有元素上设置相同的头发背景图像，使用以下代码：

/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label {
  background: url(img/bg.jpg) no-repeat center center fixed;
  ...
}

尝试仅在html或body或容器div上将头发图片设置为背景。

Answer 2

请在真实网站上查看您的CSS。您为所有内容分配了背景图像：

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label {
background: url("img/bg.jpg") no-repeat fixed center center / cover transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;

}

将其分为两个规则：

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label {
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
body {background: url("img/bg.jpg") no-repeat fixed center center / cover transparent;}

页面内容“擦除”背景

2 个答案: