Пытаясь добавить линейный градиент к изображению базы данных, могу ли я использовать изображение БД на CSS?

Question

Итак, сначала я пытаюсь создать линейный градиент на карте, поэтому у меня есть div, который является ссылкой и имеет фоновое изображение. поэтому я хочу показать изображение без текста, а при наведении курсора изменить цвет фона на более темный и показать текст.

или есть способ использовать: background-image: url(<%= project.photos.first %> в моем файле css?

Пытался использовать css для установки только линейного градиента на фон, и пока результатов нет.

Даже попробовал java-скрипт, чтобы выбрать div и добавить линейный градиент в этом формате:

linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3))

Но всегда заменяю URL, и в конце я теряю изображение.

Моя домашняя страница:

<div class="col d-flex align-content-center flex-wrap card-category home-card-light" style="background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(<%= project.photos.first %>)">
    <h2 class="card-title"><%= project.title %></h2>
  </div>
<% end %>

CSS

.home-card-light {
  height: 430px;
  width: 720px;
  background-size: contain;
  background-repeat: round;
  margin-right: auto;
  margin-left: auto;
  &:hover {
  height: 430px;
  width: 720px;
  background-size: contain !important;
  background-repeat: round !important;
    background: linear-gradient(
      rgba(23,34,40,0.5),
      rgba(13,23,54,0)
      ) !important;
  }
}

Отправленный код создает линейный градиент, но заменяет его на изображение.

Answer 1

Вы можете сделать это, используя :after

.img-gradient {
  position: relative;
  display: inline-block;
}

.img-gradient:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: -webkit-linear-gradient(top, rgba(23,34,40,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
}

.img-gradient img {
  display: block;
}

<div class="img-gradient">
  <img src="https://www.w3schools.com/bootstrap/la.jpg" width="400" />
</div>