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

【问题标题】：CSS minimum width on overlay with fixed position that is centered居中固定位置的叠加层上的 CSS 最小宽度
【发布时间】：2012-03-15 14:41:55
【问题描述】：

我有一个页面，其中内容使用 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 效果很好，除非你向下滚动。

除了“最小宽度”之外，上述配置运行良好。如果我能让它在某个点之后停止最小化，那将是完美的。

如果您对此有解决方案，请提前非常感谢

【问题讨论】：

标签： css height position center fixed

【解决方案1】：

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

【讨论】：

background-attachment：已修复导致整个页面出现一些戏剧性的混乱......也许我没有正确使用它，但它会将内容推到背景下......
背景附件对元素内部的内容没有影响。它不能推送嵌套在该元素中的元素或文本。删除无用的标记并将该背景与background-position 一起放在您的文本下方
对，我以为你的意思是背景附件：固定而不是位置：固定。如果我两者都在，没有区别。最小宽度问题仍然存在。谢谢
请用你的真实背景图像设置一个小提琴并解释你必须如何对齐它
真正的背景图片占据了整个页面 100% 的宽度和高度，效果很好。覆盖只是全高居中的列，当页面调整大小时应该保持居中。这也有效，除了最小宽度。