html - 尝试向数据库图像添加线性渐变，我可以在 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>