固定位置居中的叠加层上的 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 和 margin:auto 效果很好，除非向下滚动。

除了“min-width”之外，上述配置运行良好。如果我能让它在某个点之后停止最小化，那就完美了。

如果您有解决方案，非常感谢

Answer 1

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