图像上的半透明颜色层？

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);
}