Полупрозрачный цветной слой поверх изображения?

Question

Есть ли способ добавить полупрозрачный слой поверх изображения с помощью тега img?Я также использую загрузчик и стараюсь избегать использования CSS-решения background-image, потому что тег предлагает быстрый способ заполнить родительский элемент 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);
}