燈箱背景顏色應使用CSS

在這個頁面中，如果我們點擊登錄按鈕，它會顯示黑色背景彈出畫面覆蓋整個屏幕。但是，如果我們縮小頁面，那麼它會減小背景顏色的大小。但是如果我們縮小，我想覆蓋整個屏幕的背景。我在頁面中使用了下面的代碼。

.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 2000%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
}

但是在測試頁面中，下面的代碼用於覆蓋整個背景。它工作正常。

<style type="text/css"> 
    /*give the body height:100% so that its child 
    elements can have percentage heights*/ 
    body{ height:100% } 
    /*this is what we want the div to look like*/ 
    div.fullscreen{ 
    display:block; 
    /*set the div in the top-left corner of the screen*/ 
    position:absolute; 
    top:0; 
    left:0; 
    background-color: black; 
    /*set the width and height to 100% of the screen*/ 
    width:100%; 
    height:100%; 
    color: white; 
    } 
</style> 

<div class="fullscreen"> 
    <p>Here is my div content!!</p> 
</div>

我該如何做我的登錄頁面背景我也不知道。任何人都可以請幫我解決這個問題。

來源

2012-12-07 Rithu

你如何放置你的登錄表格div？它在桌子裏面嗎？ – SubRed

爲什麼'身高：2000％'？ –

如果我給高度爲200％，它只是停止標題上方的背景。 – Rithu

嘗試

div.fullscreen{ 
    position:fixed 
    ... 
}

絕對：該元件是相對定位成它的第一被定位（未靜態）祖先元素
固定：該元件是相對於瀏覽器窗口

來源

2012-12-07 10:08:24

哦好。它的工作正常。非常感謝你的回答。我現在很開心。謝謝你一次又一次 – Rithu

當然... +1注意固定的方法;） –

定位您需要將彈出窗口和背景移到其他任何塊元素之外，可能只是在</body>之前。背景是延伸填充100％的容器，這是表格單元而不是身體。這意味着你將不得不改變位置（左和右）。

來源

2012-12-07 10:08:45 qooplmao

它已經在體內標籤只有 – Rithu

你必須把下面的代碼body標籤結束前或body標籤開始後

<div class="black_overlay" id="fade" style="display: block;"></div>

來源

2012-12-07 10:09:23

號這應該覆蓋整個div – Rithu

的問題是，div.black_overlay是表內的，所以你不能使用widht:100%和height:100% 。只需在表格外移動div.black_overlay並添加z-index: 1;即可。我已經測試過使用Firebug，它的工作原理！

來源

2012-12-07 10:24:37

燈箱背景顏色應使用CSS

回答

相關問題