悬停背景，前面有图像

Question

我只是在基本的背景悬停和前面有图像的问题上苦苦挣扎。

我希望我的背景在悬停时变暗，但我不想它前面的图像也受到影响。所以我想要悬停背景，但同时它前面的图像仍然是一样的。

HTML:

<div class="mydiv">
<img class="img" src="Assets/Sources/badge1.png" width="60%" height="60%" >
</div>
<div class="overlay"></div>

CSS

.mydiv {
  float:left;
  width:49%;
  height:400px;
  margin-right: 1%;
  background-image: url(Sources/bg1.jpg);
  background-color:black;
  background-size: cover;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}


.mydiv:hover > .overlay {
    width:100%;
    height:100%;
    position:relative;
    background-color:#000;
    opacity:0.5;
}

Answer 1

您可以通过在 .mydiv 上使用伪元素来解决此问题，您根本不需要 .overlay 元素：

.mydiv > img {
    position: relative;
}
.mydiv:hover::before {
    content: "";
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity:0.5;
}

悬停背景，前面有图像

Hover Background with image in front of it

html

css

background

image

hover