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

时间:2017-02-21 20:48:50

标签: html css

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

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



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

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

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

1 个答案:

答案 0 :(得分:0)

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

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