Question

我正在使用wordpress博客模板，该模板有一个主容器：

.container {
    width: 100%;
    max-width: 1040px;

在一个页面上，我需要有一个图像，这将是一个完整尺寸的背景图像：100％的可用宽度。但无论我做什么，我都无法将图像移到模板主容器（1040px）之外。有什么想法吗？

Answer 1

虽然可以使用绝对定位来获取容器外部的图像，但是当你可以使用CSS背景时，为什么还要这样做呢？

所以我假设你在一个更大的容器里面有一个容器....你要做的是将图像设置为更大容器的背景，这样做（我这样做是假设容器是in是整个页面......但它可以是任何div）：

html { 
  background: url(YOURIMAGE.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

修改确定我知道你想做什么。您希望嵌套div具有100％的页宽度吗？

#wrapper {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.item {
    
    height: 300px;
    background-color:#0000FF;
    width:100%;
    
}

.fullblock {
    position: absolute;
    width: 100%;
    z-index: -1;
    background-color: #FF0000;
    height:300px;
    left:0;
    right:0;
}

<div id="wrapper">
 <div class="item">
  <div class="fullblock">
  </div>
 </div>
</div>

这将允许嵌套的div从其容器中突然出现。

如何使用css覆盖主容器max-width

1 个答案: