html - 影响父级的子级不透明度

Question

如果这是重复的，我很抱歉。我浏览了相关帖子，找不到与我正在处理的内容相似的任何内容。

我有一个图像，当悬停在上面时，不透明度会降低。我在包含图像的 DIV 上方的 DIV 中有文本，这受图像的不透明度设置的影响。文本应该保持实心，而图像变得透明。不幸的是，这两个元素在悬停时都变得透明。我认为既然文本被认为是父元素，它应该不受图像的不透明度设置的影响。

html:

<div class="album large">
    <div class="writing">
        <h1>blah</h1>
    </div>
    <div class="opac">
        <img src="background/runaways.jpg">
    </div>
</div>

CSS：

.album img
    {
    display:block;
    margin: auto;
    }

.album.large
    {
    background-image: url('background/bigblack.jpg');
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 50px;
    }


.writing
    {
    position: absolute;
    color:red;
    left: 50%;
    margin-left: -270px;
    }

.opac img:hover
    {
    opacity: .4;
    filter:alpha(opacity=40);
    }

Answer 1

解决父div的不透明度问题

使用伪元素我们可以摆脱这种情况，查看下面给出的链接以获取更多详细信息。