jquery - 消除 child 类(class)的不透明度

Question

我创建了一个小的灯箱脚本，该脚本本身工作正常，但问题是填充整个屏幕的 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;   
}

Answer 1

不能，因为父级具有 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 图像