Question

我想知道如何使图像与放置容器的宽度重叠。

例如，

<div class="container">
  <div class="background-image"></div>
</div>

和CSS

.container {
max-width: 1170px;
}

.background-image {
background: url(/img/my-image.jpg) no-repeat center center;
}

因此，在1663px宽的屏幕上，.container类的宽度为1170px。背景图片的宽度也为1170像素。

我想要实现的是在不调整HTML的情况下使图像变为全角（与.container类重叠，因此宽度为1663px）。

谢谢。

Answer 1

对于1663像素的固定宽度...

.container {
  max-width: 1170px;
  background: salmon;
  padding: 50px 0;
  margin: 0 auto;
}

.background-image {
  background: url(https://www.fillmurray.com/800/300) no-repeat center center;
  background-size: cover;
  height: 300px;
  
  /* The important part... */
  width: 1663px;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

<div class="container">
  <div class="background-image"></div>
</div>

（如果您不希望通过窗口调整宽度，请删除max-width: 100vw;）

或者，如果您希望全宽...

.container {
  max-width: 1170px;
  background: salmon;
  padding: 50px 0;
  margin: 0 auto;
}

.background-image {
  background: url(https://www.fillmurray.com/800/300) no-repeat center center;
  background-size: cover;
  height: 300px;
  
  /* The important part... */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50vw);
}

<div class="container">
  <div class="background-image"></div>
</div>

Answer 2

如果我正确理解了您的问题，则说明您正在寻找可产生所需效果的属性background-size: cover，我添加了一个代码段，以便您查看。

.container {
  max-width: 1170px;
}

.background-image {
  background: url(/img/my-image.jpg) no-repeat center center;
  background-size: cover;
  /* This will create the effect you are looking for */
  background-color: #000000;
  /* This can be removed, for illustration purposes only*/
  height: 500px;
  /* This can be removed, for illustration purposes only*/
}

<div class="container">
  <div class="background-image"></div>
</div>

Answer 3

如果我正确理解了您的问题，则需要使用全角背景图片。

.container {
  max-width: 500px;
  min-height: 500px;
  background: blue;
  margin: 0 auto;
  color: red;
}

.background-image {
  background: url(https://www.w3schools.com/cssref/paper.gif) repeat center center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  z-index: -1;
}

<div class="container">
  <div class="background-image"></div>
  container
</div>

CSS使背景图像重叠容器

3 个答案: