css - 对图像应用不透明度会导致绝对 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