以固定位置爲中心的疊加層的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最小寬度

回答

相關問題