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的不透明度问题

使用Pseudo-elements我们可以解决这个问题，请查看下面给出的link以获取更多详细信息。

儿童不透明影响父母

1 个答案: