半透明背景变暗图像

Question

我有一个带有背景图像的容器，可以在悬停时添加半透明背景。这是我的（简化）HTML：

<div class="container">
  <div class="overlay"></div>
    <img src="hi.jpg">
</div>

以下是我实现半透明叠加的方法：

.container:hover > .overlay {
  background-color: black;
  height: 100%;
  position: absolute;
  width: 100%;
  opacity: .2
}

然而，当我将鼠标悬停在容器上时，其背景图像不仅受到黑色背景的影响，图像也是如此，好像图像位于覆盖背景之下，使其略微变暗。我尝试通过将图像的z索引设置为3来解决这个问题，但它仍然是黑暗的。

Answer 1

z-index仅适用于定位的元素，因此请提供您的图片position: relative以及增加其z-index。