半透明背景变暗图像

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。