從兒童類中刪除不透明度類

我創建了一個小的燈箱腳本，腳本本身工作正常，但問題是填滿整個屏幕的lightbox類需要半透明，如果我做到這一點，lightbox-image變得半透明以及。我嘗試將opacity: 1;添加到lightbox-image，但它不起作用。你能幫我嗎？從兒童類中刪除不透明度類

的HTML看起來像這樣：

<div class="lightbox"> 
    <div class="lightbox-image"> 
     <p>Something here</p> 
    </div> 
</div>

CSS：

.lightbox { 
    display: none; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 100%; 
    background-color: #000; 
    z-index: 1000; 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
} 

.lightbox-image { 
    position: fixed; 
    display: none; 
    width: 600px; 
    text-align: center; 
    z-index: 1001; 
    background-color: #000; 
    margin-top: 100px; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2011-12-08 Hubert Jarema

你不能因爲家長有opacity:0.9，讓所有的孩子將繼承這個屬性（你可以不爲兒童分配不同的不透明度）。你可以爲背景色的RGBA即

.lightbox 
{ 
    display:none; 
    position:absolute; 
    width:100%; 
    top:0; 
    left:0; 
    height:100%; 
    background-color:rgba(0,0,0,0.9); 
    z-index:1000; 
}

使用......而且，作爲後備（即IE瀏覽器：d）透明反覆1px的圖像

來源

2011-12-08 14:22:54 stecb

'background-color：transparent repeated 1px image;'？ –

我試過使用IE過濾器，但我現在在IE8和7 –

沒有完全透明的背景，因爲後備你可以使用**圖像** 1px乘以1px :)像'background：url（path/to/image）repeat; '背景之前：rgba（0,0,0,0.9）' – stecb

透明度上的父設置也會影響任何兒童元素的不透明度。這裏簡單的解決方法是從父刪除收藏夾圖像div：

<div class="lightbox"></div> 
<div class="lightbox-image"> 
    <p>Something here </p> 
</div>

佈局將保持完全像從前那樣，但是背景的不透明度，現在將獨立的圖像。

來源

2011-12-08 15:03:43

不能這樣做。涉及其他許多事情。雖然謝謝！任何方式來做到這一點與jQuery或是同樣的事情？ –

從兒童類中刪除不透明度類

回答

相關問題