не могу подкрасить мой boostrap 4 изображения карусели

Question

пытаясь добавить оттенок изображения к моим изображениям карусели (BS4), я сначала понял, как использовать

.tinted-image img {
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
}

ссылку на кодовый указатель - https://codepen.io/nightcoder21/pen/RyeYoz

, похоже, эта посылка работает,Кто-нибудь знает какой-нибудь простой способ сделать это?(я стараюсь сделать свой код максимально простым и свободным от помех)

Заранее спасибо

Answer 1

Измените свой CSS на этот

.tinted-image:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45)
  );
}

Вы можете проверить это здесь: https://codepen.io/anon/pen/rvqZvK

С помощью: перед селектором вы можете подкрасить изображения разными цветами ^^