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

与图象的翱翔背景在它前面

1 个答案: