用css/jquery全屏覆蓋

我試圖做一個「巨大」的div，用不透明度爲0.4填充所有的視口。問題是如何去做。我試圖使一個div裏面我所有的頁面內容，並給它這個特性：用css/jquery全屏覆蓋

.div{ 
    width:100%; 
    height:100%; 
    background:#000; 
    opacity:0.5; 
}

因爲這

沒有工作，我試圖添加的z-index，把一個高值，但它也不能工作。有什麼想法？我要讓這樣的事：

enter image description here

來源

2014-04-24 nick

我認爲你在尋找這樣的事情：

的CSS：

#fade-wrapper { 
    display: none; 
    position: fixed; 
    height: 100vh; 
    width: 100vw; 
    background: rgba(0, 0, 0, 0.5); 
}

這裏有一個小提琴：http://jsfiddle.net/hTQb8/1/

來源

2014-04-24 22:34:05 MyCompassSpins

沒有我的網頁:( – nick

應該只要你的JS做工精細的工作/ jQuery是正確的，只要你設置你的'.div' CSS就像我上面的'＃fade-wrapper'一樣。也許你可以發佈你的JS/jQuery？ – MyCompassSpins

另外，請確保在嘗試查看更改時進行硬刷新，因爲瀏覽器可能會顯示您緩存的網站版本。 – MyCompassSpins

試試這個

HTML

<div class="div_out"> 
    <div class="div_in">the content in this div will be placed above the overlay</div> 
</div>

CSS

.div_out{ 
width:100%; 
height:100%; 
background:#000; 
opacity:0.5; 
position:fixed;//you forgot from this point 
top:-22px; 
left:-22px; 
margin-top:22px; 
margin-left:22px; 
} 
.div_in{ 
width:90%; 
height:90%; 
margin:0 auto;  
margin-top:1.5%; 
background color:white; 
}

來源

2014-04-24 22:32:25

用css/jquery全屏覆蓋

回答

相關問題