我有一个 <div id='a'>
当悬停在其父元素上时,它会变得透明。但是 div 的内容应该是不透明的。代码如下:
.changer{
background-color: gray;
opacity:0;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.mb-4:hover .changer{
opacity: 0.6;
}
<a href="#" class="d-block mb-4">
<div id="a" class="changer d-inline">The text that must be non-transparent</div>
<img class="img-fluid img-thumbnail" src="images/barcelona.jpg" alt=""> <!--this element is not very important-->
</a>
最佳答案
使用背景色来做到这一点 比方说,如果你想让一个 div 半透明并且背景是白色的,那么你需要以下代码:
background: rgba(255,255,255,0.6);
这里需要使用rgb值,最后一个0.6值是不透明度,(255,255,255)是白色的颜色代码,你可以通过更改值来制作任何颜色。
移除背景颜色和不透明度属性
关于html - 使 div 元素透明,悬停时内容不透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50119419/