Question

请参考此example并提供以下说明：

我有一个带有超宽中心背景图像的网页。我希望页面的主体宽度折叠到内容，并忽略包含背景的div。在给出的示例中，我有一个简单的示例，说明我是如何做到的：bg-outer div建立正确的页面宽度（200px宽），而bg-inner div（400px宽）包含超宽图像。然后我使用溢出：可见和负边距来尝试使较宽的bg内部居中而不增加页面宽度。但是，如示例所示，当浏览器窗口小于400px而不是200px时，会出现水平滚动条。为什么会这样？有更好的方法吗？

谢谢 -

修改

这是一个duplicate我最终找到了一个类似但略有不同的解决方案。我喜欢wdm给出的答案更好。

Answer 1

重复发帖：Why do negative margins affect my page width?

然而，这个更好地解释了你想要完成的事情。

这很简单......

演示：http://jsfiddle.net/wdm954/L3U9c/

<div id="bg">
    <div id="content">
        Here is my content.
    </div>
</div>


#bg {
    background-color: red;
    background-position: top center; /* for images */
}
#content {   
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
    width: 200px;
    background-color: #ccc;
}

Answer 2

您可以添加

body {
    overflow-x: hidden;
}

Answer 3

我认为你所做的就是3行CSS：

body {
    background-image:url('myurl.jpg');
    background-position:center;
    background-size:cover;
}

如你所见：

<body>
    <p>This is my document. Nothing else necessary</p>
    <!-- any other content you desire -->
</body>

在不影响体宽的情况下使用宽背景div的技术

3 个答案: