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

如何使我的按钮图像在悬停时以透明的方式更改背景色，而不影响标题“Kids”

当我将鼠标悬停在图像框上时，图像也会受到影响，导致额外的透明度层

.kids{
背景图片：url（/kids\u image.jpg）；
}
儿童组：悬停{
背景色：rgba（0,0,0,0.3）
}

---

JPEG图像没有透明度，因此您在示例中看到的只是图像，它覆盖了

：hover上设置的
背景色

您需要在编辑应用程序中打开图像，删除背景，然后重新保存为具有透明度的PNG。或者，您也可以制作第二张图像，背景颜色为烘焙后的其他颜色。
使用
div.kids:hover
。（删除空格）。你想在
.kids
上显示背景图像，对吗？如果您希望它位于其直接子级（并且仅位于其直接子级），请使用
div.kids>*：hover
。您可能需要硬编码h1的背景，例如
h1{background color:white；}
。