html - 使 div 元素透明，悬停时内容不透明

Question

我有一个 <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>

Answer 1

使用背景色来做到这一点比方说，如果你想让一个 div 半透明并且背景是白色的，那么你需要以下代码:

background: rgba(255,255,255,0.6);

这里需要使用rgb值，最后一个0.6值是不透明度，(255,255,255)是白色的颜色代码，你可以通过更改值来制作任何颜色。

移除背景颜色和不透明度属性