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

如何让我的按钮图像在悬停时用透明度更改背景颜色并且不会影响标题“Kids”。如何在不影响子元素的情况下更改div类中的背景图片

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

.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>

2017-02-21 Gen

使用'div.kids：hover'。（删除空间）。你想要'.kids'上的背景图片，对吗？如果你想要它的直接孩子（并且只在它的直接孩子），使用'div.kids> *：hover'。 –

您可能需要硬编码h1的背景，例如'h1 {background-color：white;}'。 –

JPEG图像没有透明度，所以你看到在你的例子是只有图像，其中涵盖了对:hover的background-color集。

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

2017-02-21 20:57:28 Gwellin

回答