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

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

2 个答案: