图像上的半透明颜色层？

Question

有没有办法使用img 标签在图像上添加半透明层？我也在使用引导程序并试图避免使用background-image CSS 解决方案，因为标签提供了一种快速响应填充父 div 的方法。

HTML

<div id="homebackground">
   <div id="bgcont">
     <b-img id="fitfill" :src="require('../assets/homebg1.jpg')" fluid-grow alt="Responsive image"/>
   </div>
</div>

CSS

#bgcont{
    background-color: rgba(0, 0, 0, 0.5);
  }

  #fitfill{
    max-width: 100%;
    max-height: 100%;
  }

  #homebackground{
    height: 91.5%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

Answer 1

您可以使用 css ::after 伪元素：

#bgcont::after {
    content: ""; // ::before and ::after both require content
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}