如何让我的按钮图像在悬停时以透明度更改背景颜色,而不会影响标题" 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;
答案 0 :(得分:0)
JPEG图片没有透明度,因此您在示例中看到的仅是图片,它掩盖了background-color
上设置的:hover
。
您需要在编辑应用程序中打开图像,删除背景,然后重新保存为具有透明度的PNG。或者,您可以使用烘焙的备用背景颜色制作第二张图像。