如何在不影响子元素的情况下更改div类中的背景图像

Question

如何让我的按钮图像在悬停时以透明度更改背景颜色，而不会影响标题＆＃34; Kids＆＃34;。

当我悬停图像框时，也会受到影响，从而产生额外的透明层。

＆＃13;

＆＃13;

.kids {
  background-image: url(/kids_image.jpg);
}

div.kids :hover {
  background-color: rgba(0, 0, 0, 0.3)
}

＆＃13;

<div class="kids">
    <a href="http://sampleurl.com">
        <div class="grid960">
            <h1>Kids</h1>
    </div>
    </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

JPEG图片没有透明度，因此您在示例中看到的仅是图片，它掩盖了background-color上设置的:hover。

您需要在编辑应用程序中打开图像，删除背景，然后重新保存为具有透明度的PNG。或者，您可以使用烘焙的备用背景颜色制作第二张图像。