我正在做一个 transition
,当用户将鼠标悬停在图像上时,它会逐渐变成透明的白色。
我的问题是我需要将渐变的颜色更改为黑色。我试过简单地将 background:black;
添加到包含 transition
的类中,但它并没有正常工作,它仍然逐渐变成白色透明。
我使用的CSS代码是:
.hover:hover {
opacity: 0.2;
}
.item-fade {
background: black;
opacity: 0.8;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />
最佳答案
用黑色背景的 span
元素包裹你的图片。
.img-wrapper {
display: inline-block;
background: #000;
}
.item-fade {
vertical-align: top;
transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover {
opacity: 0.2;
}
<span class="img-wrapper">
<img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>
关于css 过渡不透明度淡化背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21145621/