尝试将线性渐变添加到数据库图像，我可以在css上使用db图像吗？

Question

首先，我尝试在一张卡片上创建一个线性渐变，所以我有一个div，它是一个链接，并且有一个背景图像。因此，我想要做的是显示没有文本的图像，当我悬停时，将背景更改为较暗的色调，并显示文本。

或者有没有办法在我的css文件中使用: background-image：url(<%= project.photos.first %>？

尝试使用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>

​