如何让背景图片超出最大宽度 div答案

【问题标题】：How to get a background picture going outside max-width div如何让背景图片超出最大宽度 div
【发布时间】：2014-12-17 15:30:03
【问题描述】：

我有一个最大宽度设置为 1000 像素的响应式网站，但我需要适合与其中一个 div 重叠的背景图片，并将整个页面宽度的底部边框放置到其他 div。

我的代码是这样的：

.container { 
width: 100%; 
max-width: 1000px;
}


.logotest {
background-color: #03b9e5;
height: 50px;
}

.navtest {
background-color: #e4ed00;
height: 25px;
}

.socialtest {
background-color: #ab801a;
height: 25px;
}

.main {
height: 750px;
background: url(background.jpg) no-repeat top center;
margin: auto;
}

.line {
border-bottom: 1px solid black;
}

.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">	
</div>   
</div>
<div class="line"></div>

<div class="main line" id="second">

</div><div class="container">
<div id="third">
</div>
</div>
</body>

我得到第一个 div 的宽度正确，底部边框跨越整个页面宽度，第二个 div 显示了背景图片，但 1000px 的最大宽度不再适用。底部边框显示正确（划分第二个和第三个 div），第三个 div 再次应用了正确的最大宽度。

我在做什么错/没有做什么来获得第二个 div 的最大宽度？

【问题讨论】：

你玩过background-size:cover;和一个外包装吗？
最大宽度应用于container div's。第二个 div 既没有 container 类也没有父容器 div。

标签： css html

【解决方案1】：

您的解决方案

如果background-size属性的浏览器支持对你来说足够好，你可以使用background-size: cover;。检查here 或here 以查看浏览器支持。

这里是代码 sn-p 来展示它是如何工作的。如果您希望它始终居中，请务必将您的背景图片定位到 center center。

.container {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.line {
  border-bottom: 1px solid black;
}
.logotest {
  background-color: #03b9e5;
  height: 50px;
}
.navtest {
  background-color: #e4ed00;
  height: 25px;
}
.socialtest {
  background-color: #ab801a;
  height: 25px;
}
.main {
  height: 250px;
  background: url(http://lorempixel.com/250/250) no-repeat center center;
  background-size: cover; /* This does the magic */
}
.container:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

<body>
  <div class="container" id="first">
    <div class="logotest">
    </div>
    <div class="socialtest">
    </div>
    <div class="navtest">
    </div>
  </div>
  <div class="line"></div>


  <div class="main" id="second">
    <div class="container">Put your content in here.</div>
  </div>
  <div class="line"></div>
  <div class="container">
    <div id="third">
    </div>
  </div>
  <div class="line"></div>
</body>

最后（但并非最不重要）

您可能想查看这篇关于网页设计中响应式图像状态的精彩文章，如果您要进入响应式网页设计，这将对您有所帮助：Responsive images done right.

【讨论】：

第一个解决方案也不起作用。与我的原始解决方案类似（第二个 div 部分对图像和内容都使用全屏宽度），但您的解决方案没有给出第一条底线全屏宽度。
我不太明白你想要你的底线在哪里。您是否希望它在您的 div 下方带有 container 类和 main 类（这意味着三行）？您是否希望您的线条在 1000 像素以上的宽度上也能全屏显示？你能张贴一张照片来展示你的追求吗？
@lomenak 我已经更新了我的答案，在 container 和 main 类 div 下方添加了行。该行现在是全屏的。我已将您的 max-width 从 1000px 更改为 300px，以便您可以查看是否是您所追求的（只需在代码中将 300px 替换为 1000px）。我在每个container 和main div 下方添加了一个<div class="line"></div> 用于全屏行，这是您想要的吗？在我进行了一些更改时，请务必检查整个代码。
mate 这看起来完全符合我的需要。明天早上我会正确地测试它并回复你！
对不起，伙计，我确实考虑过为线条使用单独的 div，这确实使线条全宽，但是我希望能够为主体（以及第三个 div那件事）在整个宽度上。例如。我只希望所有其他内容（除了线条和背景图片之外的所有内容）都受到最大宽度的影响