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样式。

将具有不透明度的背景颜色添加到img标记

2 个答案: