在具有背景颜色的父 div 中对 PNG 图像（透明）制作叠加悬停效果的问题

Question

我相信这很简单，但我似乎无法弄明白。我想在图像上创建叠加悬停效果，但我在处理具有透明度的 PNG 图像时遇到了问题。父元素 div 的黑色背景填充了 PNG 图像的透明部分，就好像图像的部分默认设置为不透明度：0。

这是我的 html

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

这是我的 css

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

Answer 1

这里是解决方案，不多说了，但是需要相应地改变值，我只是用值来显示功能。阅读代码评论

.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>

在具有背景颜色的父 div 中对 PNG 图像（透明）制作叠加悬停效果的问题

Issue with making an overlay hover effect to a PNG image (transparent) in a parent div with a background color

html

css

png

overlay

transparency