对图像应用不透明度会导致绝对 div 也透明

Question

我有一个以下结构的图片库：

<div class="gallery">
    <div class="message">
        Welcome to gallery
    </div>    
    <img src="http://placehold.it/300x300" />
</div>   

还有 CSS ：

.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}
.gallery img {
    opacity:.85;
}

但这会导致 div message 也透明！如何预防？透明的原因是什么？

DEMO

Answer 1

图像似乎位于消息 div 的顶部。我只是像这样交换了它们：

<img src="http://placehold.it/300x300" />
<div class="message">
    Welcome to image gallery
</div>   

这为我解决了问题。

fiddle

另一种方法是给消息一个 z-index，如下所示：

.message {
    position:absolute;
    left:150px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
    z-index: 2;
}

.gallery img {
    opacity:.85;
}

fiddle

Answer 2

你可以给图片一个id，这样只有图片的不透明度会更低

#img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

或者你可以使用一个类

.img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

那么你的可能会是这样的：

    <div class="gallery">
    <div class="message">
        Welcome to image gallery
    </div>    
    <img src="http://placehold.it/300x300" class="img"/>
</div>
#img{ opacity: 85%; }
.img{ opacity: 85%; }
.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}

希望对您有所帮助！ Demo