0

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

现场直播

在右侧部分，整个容器应填充白色。然而，页面内容似乎正在擦除 - 因为没有更好的词 - 背景。我试过利用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 -->
4

2 回答 2

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。

于 2013-09-12T21:53:27.323 回答
1

请在真实网站上检查您的 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;}
于 2013-09-12T21:53:36.183 回答