对具有背景颜色的父 div 中的 PNG 图像（透明）进行叠加 hover 效果的问题

Question

我相信这很简单，但我似乎无法弄清楚。 我想在图像上创建叠加 hover 效果，但是我在使用具有透明度的 PNG 图像时遇到了问题。 父 div 元素的黑色背景填充 PNG 图像的透明部分，就好像图像的部分设置为 opacity: 0 默认情况下。

这是我的 html

<div class="parent">
<img src="transparent.png"/>
</div>

这是我的 css

.parent {
background-color: #000000;
}
.parent img:hover {
opacity: .7;
}

Answer 1

这里是解决方案，不多说，但是数值需要相应地改变，我刚刚用数值来显示function。 阅读代码的注释

 .parent { background-color: #000000; }.parent img:hover { opacity: .1; /*change this accordingly*/ background: rgba(255,255,255,0.5); /*Last value of rgba is opacity, 0.0 -> 1.0*/ }.parent img { background: rgba(255,255,255,1);; }

 <div class="parent"> <img src="https://www.lunapic.com/editor/premade/transparent.gif"/> </div>