在悬停时，如何更改背景图像的不透明度，而不是没有位置的文本：relative？ [重复]

Question

这个问题在这里已有答案：

• 我不想在CSS 14答案中 继承父级的子不透明度
• 我可以仅将不透明度设置为div的背景图像吗？ 8个答案

我有一个图像，在悬停时，使用visibility: visible在其中显示两个元素visibility: visible 。 我需要这个图像在悬停时的不透明度为0.4，但其中没有元素。

<aside class="apartment">
  <h2>Adipiscing elit, sed diam nonummy nibh euismod</h2>
  <a href="#" class="button">Read More</a>
</aside>
<img class="essentials" src="assets/level-3-image-7.jpeg" alt="An open travelling case with clothes, a camera and other necessities in it">
</section>

.apartment {
  background: url("assets/level-3-image-6.jpeg");
  background-position: 0 90%;
  background-size: cover;
  width: 48.5%;
  height: 62.015rem;
  position: relative;
  float: left;
}

.apartment h2 {
  position: absolute;
  text-align: center;
  width: 26rem;
  top: 28%;
  left: 25%;
  visibility: hidden;
}

.apartment .button {
  position: absolute;
  top: 65%;
  left: 37%;
  visibility: hidden;
}

.apartment:hover {
  filter: opacity(0.4);
}

.apartment:hover h2{
  visibility: visible;
}

.apartment:hover .button{
  visibility: visible;
}

我知道这个问题已被问过，但我找不到一个适合我的答案，我的.apartment类需要保持position:relative对于文本的位置。

编辑1：**关于MOD的编辑，当我设置时，第一个答案不起作用：

.apartment:hover {
  background-color: rgba(0,0,0,0.5);
}

第二个答案是关于我特别要求不使用的定位。

编辑2：在reddit上发布了答案。 https://jsfiddle.net/0wdL14an/

Answer 1

你不能只用css来做这件事，因为改变父元素的不透明度当然会改变其子元素的不透明度。 您可以使用所需的不透明度创建第二个相同的图像，然后使用jquery在悬停时将其交换出来，如下所示：

$(“.apartment”).hover(function(){
   $(this).css(“background”,”url(/path/to/new/image.png)”);
}, function(){
  $(this).css(“background”,”url(/path/to/old/image.png)”);
});