悬停在其前面的图像的背景答案

【问题标题】：Hover Background with image in front of it悬停在其前面的图像的背景
【发布时间】：2016-02-06 09:13:38
【问题描述】：

我只是在为基本的背景悬停而苦苦挣扎，上面有图像。

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

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;
}

【问题讨论】：

请张贴你的 jsfiddle。

标签： html css image background hover

【解决方案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;
}

【讨论】：