从子类中删除不透明度

Question

我创建了一个小灯箱脚本，脚本本身工作正常，但问题是填满整个屏幕的lightbox类需要是半透明的，如果我这样做，{{1}变得半透明。我尝试将lightbox-image添加到opacity: 1;，但它不起作用。你能帮我吗？

HTML看起来像这样：

lightbox-image

CSS：

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

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图像

Answer 2

在父级上设置的不透明度也会影响任何子元素的不透明度。这里的简单解决方案是从父级中删除灯箱图像div：

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

布局将保持原样，但背景的不透明度现在将与图像无关。