對具有背景顏色的父 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>