css - 不透明度适用于悬停，但不适用于背景颜色。为什么？

Question

我想在 4 张图像上创建一个黑色透明叠加层，保持大小不变​​，并在可能的情况下通过悬停添加一些文本。我看过预览答案，但它对我不起作用。初学者。你能帮帮我吗？

HTML

<section class="image">

    <img src="images/JOHN.jpg" alt="john" id="John" >
    <img src="images/CITIES.jpg" alt="cities" id="Cities">
    <img src="images/HOMIES.jpg" alt="homies" id="Homies"> 
    <img src="images/HASARD1.jpg" alt="hasard" "Hasard"> 

</section>

CSS

img {
  width: 47%;
  height: auto;
}

#John:hover {
  background: black;
  ;
  opacity: 0.7;
  /* i also tried */
  background: rgba(0, 0, 0, 0.7))
  /* the only thing that works on it is the opacity */
}

section.image {
  text-align: center;
}

谢谢

Answer 1

您尝试应用的背景不会出现在 <img> 上标签，因为您的图片将其挡住了。

想想你的<img> tag作为一个分层元素，上面是你的实际图片，下面是设置背景的容器。由于您的图像填满了整个容器，因此您的背景永远不会出现。

您要做的是创建一个出现在图像顶部并在悬停时出现的元素。

为此，您需要先包装您的 <img>带有元素的标签，如下所示:

<a href="#" class="img-link">
  <img class="image" src="http://placehold.it/350x150" />
</a>

我使用了 <a>标记，因为我假设您想要可点击的内容。

接下来我们可以应用一些基本样式，在 <a> 之后插入一个元素。标签，并使其在悬停时出现。结果是这样的:

.img-link {
  display: inline-block;
  line-height: 0;
  position: relative;
}

.img-link:after {
  background: rgba(0,0,0,0.3);
  display: inline-block;
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  transition: opacity 0.2s linear;
}

.img-link:hover:after {
  opacity: 1; /* show overlay */
}

<a href="#" class="img-link">
  <img class="image" src="http://placehold.it/350x150" />
</a>