如果这是重复的,我很抱歉。我浏览了相关帖子,找不到与我正在处理的内容相似的任何内容。
我有一个图像,当悬停在上面时,不透明度会降低。我在包含图像的 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);
}