宽背景css使用：before标记

有人能帮我吗

---

为什么右边有一个很大的空间，而水平滚动条是可见的？

页脚和内容部分的右边距都是-100%，这会导致滚动条。禁用这两个元素的CSS属性，滚动条就会消失。

请在CSS下面更改

#content::before {
  background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
  content: " ";
  /*left: -100%;
  position: absolute;
  right: -100%;
  top: 0;
  bottom: 0;
  z-index: -1;*/
}

#footer::before {
  background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
  border-top: 1px solid #032d34;
  content: " ";
  /*left: -100%;
  position: absolute;
  right: -100%;
  top: 0;
  bottom: 0;
  z-index: -1;*/

---

}

我认为您的

#页脚

和

#内容

中存在结构问题。 例如您将背景属性应用于

：before

中的100%背景，以及页脚元素中的

最大宽度：920px

与

宽度：100%

组合，这看起来像是一个矛盾

我建议您进行以下修改：

您可以删除

#content:before

和

#footer:before

属性。您可以在

#content

元素中创建一个容器div，其中包含网站的宽度，如下所示：

#content .container { 
  width: 920px;
  margin: 0 auto;
}

您可以在宽度为100%的

内容上应用背景属性

#content {
  width: 100%;
  background: blue; /* you put your background properties on it */
}

此外，对页脚执行相同的操作：

#footer {
    position: relative;
    z-index: 1;
    width: 100%;
    /* max-width: 920px; remove this line */
    background: blue; /* you put your background properties on it */
    margin: 0 auto;
    padding: 30px 0 15px;
    color: #fff;
}

#footer .wrap {
    position: relative;
    margin: auto; /* you use this property to center this container as it is on the website */
    padding: 0 0 50px;
    font-size: 0;
    width: 920px; /* you apply width on this container instead of the #footer container */
    letter-spacing: -5px;
}

编辑：我做了一个JSFiddle来解释我的想法
嗨，谢谢你的努力和回答我的问题。我会试试你的解决办法。谢谢你！嗨，谢谢你的努力和回答我的问题。我会试试你的解决办法。谢谢你！你尝试过我的解决方案吗？嗨，谢谢你的努力和回答我的问题。我会试试你的解决办法。谢谢你！