Question

我正在制作一个背景标题图片为1500的着陆页。

内容容器是950px

我需要它，因此当屏幕尺寸发生变化时，内容会保留在中心位置（不仅仅是移动桌面）

当我将屏幕调整到1499以下时，我得到一个滚动条，页面上没有任何内容移动。我想要的是内容移动中心和背景图像均匀地移出屏幕

<div id="wrapper">
  <div class="content">
     <p>all copy etc </p>
 </div>
</div>

CSS

#wrapper{ width: 1500px; margin: 0 auto; background:url(images.jpg); background-repeat: no-repeat;   }
.content{width: 950px;  margin: 0 auto;  }

包装器图像的宽度为1500px - 但是当屏幕调整大小时，我需要将其中一些内容放在页面上（均匀地），以使内容保持居中的背景图像。

Answer 1

尝试以下样式 - 代码中的注释

#wrapper {
  width: 100%;         /* make div 100% width with a max width so it will shrink below 1500px */
  max-width: 1500px;
  margin: 0 auto;
  background: url(images.jpg);
  background-repeat: no-repeat;
  background-position:top center;   /* make sure background is aligned to the top and center of the element */
}

.content {
  width: 100%;   /* make div 100% width with a max width so it will shrink below 1500px */
  max-width: 950px;
  margin: 0 auto;
}

<div id="wrapper">
  <div class="content">
    <p>all copy etc </p>
  </div>
</div>

Answer 2

你可以使用overflow：hidden来隐藏额外的溢出空间。

包装背景图像不会在页面上消失

2 个答案: