以固定位置为中心的叠加层的CSS最小宽度

我有一个页面，其中的内容位于页面的中心，使用margin：auto，我想添加以相同方式居中的背景，但由于当我向下滚动时，不会出现背景我已经使用了位置：固定，很好地执行这个技巧。以固定位置为中心的叠加层的CSS最小宽度

但是，将内容定位到与内容相同的方式是一个巨大的挑战，因为使用左边：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 */ 
}

我试过很多的组合但背景总是调整大小不同于内容，我希望它保持原样。位置：绝对保证金：除非向下滚动，否则自动完美地工作。

除了“最小宽度”之外，上述配置很好地工作。如果我能够在某个点后停止最小化，这将是完美的。

事先非常感谢，如果你有这个

来源

2012-03-15 Nick

的解决方案，你可以使用background-attachment: fixed作为背景，而不是使用空标记为造型的目的。通过这种方式，即使在向下滚动页面时也能看到它。

来源

2012-03-15 14:46:08 fcalderan

background-attachment：fixed会在整个页面上引起一些戏剧性的混乱......也许我没有正确使用它，但它将内容置于背景之下... – Nick 2012-03-15 14:48:58

background-attachment对内容没有任何影响元素。它无法推送嵌套在该元素中的元素或文本。删除无用的标记，并将该背景与'background-position'一起放置在您的文本下 – fcalderan 2012-03-15 14:51:04

右键我认为您的意思是background-attachment：固定而不是位置：固定。如果我同时拥有，则没有区别。最小宽度问题仍然存在。谢谢 – Nick 2012-03-15 14:53:13

以固定位置为中心的叠加层的CSS最小宽度

回答

相关问题