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

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>标记视为分层元素，顶部是您的实际图片，下方是设置背景的容器。由于您的图像会填满整个容器，因此您的背景将永远不会出现。

您想要做的是创建一个显示在图像顶部的元素，并在悬停时显示。

为了做到这一点，你需要首先用你的<img>标签包装一个元素，如下所示：

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

我使用了<a>代码，因为我假设您想要点击某些内容。

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

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

快速谷歌＆＃34; CSS图片标题悬停＆＃34;揭示了很多你会发现有用的链接:)以此为例：http://demo.hongkiat.com/css3-image-captions/index.html

基本上你不能用img来做。你需要一些额外的HTML来创建黑色背景。例如，这是一个非常基本的jsfiddle：https://jsfiddle.net/outfg5ym/

注意我是如何将我的img包裹在div中的：

<div class="black">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg">
</div>

div在图像后面创建一个黑色背景，然后当鼠标悬停在div上时，图像的不透明度会被删除。

Answer 3

您可以为图像添加滤镜以达到类似效果。 像这样：

img:hover {
 -webkit-filter:brightness(70%);
 filter:brightness(70%);
}

示例：https://jsfiddle.net/d6tce9g8/1/

此外，还有很多可用的过滤器：https://developer.mozilla.org/en/docs/Web/CSS/filter

浏览器支持过滤器：http://caniuse.com/#search=filter