在IMG标签中添加带有不透明度的背景颜色

Question

我仅限于添加任何其他HTML标记来创建一个覆盖div以执行此操作。

但是，使用标记，我需要在图像顶部不透明度放置一个黑暗的覆盖。

 background: rgba(0, 0, 0, 0.5);

标记为：

<div class="fusion-image-wrapper">
     <a href"#">
        <img src="image-path" >
    </a>
</div> 

有什么想法？

谢谢

Answer 1

您可以使用::之后，因此您不必添加另一个元素

.fusion-image-wrapper a {
   position: relative;
   display: block;
}
.fusion-image-wrapper a::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1;
}

Answer 2

，因此您需要在黑色背景上进行透明图像：(

.darkenImage{
  display: inline-block;
  background: #000;          /* :) */
}
.darkenImage img {
  vertical-align: middle;
  opacity: 0.5;              /* :) */
}

<a class="darkenImage" href="#">
   <img src="https://loremflickr.com/cache/resized/4698_27827105189_d6ce3f3401_n_300_200_nofilter.jpg" >
</a>

，如果您使用.jpg和 .png 图像的混合物，则可以将background: #fff;添加到img样式中。