叠加层上的 CSS 最小宽度，固定位置居中

Question

我有一个页面，其中的内容使用 margin:auto 定位在页面的中心，我想添加一个以相同方式居中的背景，但是因为当我向下滚动时背景没有出现我有求助于使用 position:fixed ，这很好地解决了问题。

然而，事实证明，将其置于与内容相同的中心位置是一个巨大的挑战，因为使用 left:x% 和 margin-left:-y% 是一场噩梦，而且在所有屏幕分辨率下都无法正常工作。

标记很简单:

<div id="main" class="container">   
    <div class="overlay"></div>
    <div id="content"></div> 
</div>

可以看到站点HERE

我想到的最佳 CSS 配置是这样的:

.overlay
{
  position: fixed;
  top: 0; /* These positions makes sure that the overlay */
  bottom: 0;  /* will cover the entire parent */
  left: 0;
  width: 72%;
  margin-left:14%;
  height:100%;
  background: #000;
  opacity: 0.45;
  -moz-opacity: 0.45; /* older Gecko-based browsers */
  filter:alpha(opacity=45); /* For IE6&7 */
}

我尝试了很多组合，但背景的调整大小总是与内容不同，我希望它保持原样。Position:absolute with margin:auto 工作得很好，除非你向下滚动。

除了“min-width”之外，上面的配置工作得很好。如果我能让它在某个点后停止最小化，那就太完美了。

如果您有解决方案，在此先感谢您

Answer 1

您可以使用 background-attachment: fixed 作为您的背景，而不是使用空标记来进行样式设置。这样，即使您向下滚动页面，您也会看到它。