如何使渐变出现在图像之上和文本之后？

Question

我一直在尝试将 grandient 放在图像的顶部和文本的后面，但是我从网上找到的所有尝试都没有奏效。我需要在 div 中提供图像的来源，因为如果它在 css 代码中，它会将相同的图像应用于我创建的所有其他模板。

谢谢:)

<div class="titles">
    <div class="thumb">
        <img class="img overlay" 
         height=260px 
         width=240px 
         alt="Shokugeki no Souma: Ni no Sara" 
         src="https://img7.anidb.net/pics/anime/184719.jpg" />
            <div class="titulo">Shokugeki no Souma: Ni no Sara</div>
            <div class="epis">Epis. 12</div>
    </div>

.titles .thumb {
    position: relative;
    float: left;
    height: 260px;
    width: 245px;
    max-height: 260px;
    max-width: 260px;
    margin: 0 auto;
    padding: 5px;
 }

 .thumb .titulo {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 8px;
    margin: 5px;
    font-size: 15px;
    font-weight: bold;
  color: white;
}

.thumb .epis {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
  color: white;
}

.titles .thumb .img:hover {
    max-height: 260px;
    max-width: 260px;
    height: 260px;
    width: 240px;
    opacity: 0.8;
}

.img.overlay {
  background: linear-gradient( 
    to bottom,   
      black, 
      rgba(64,64,64,1),
      rgba(64,64,64,1),
      rgba(64,64,64,1),
      rgba(64,64,64,1),
      rgba(64,64,64,1),
      rgba(64,64,64,1), 
      black);
}

Answer 1

你介意多解释一下当你尝试实施这个时出了什么问题吗？

我的建议是将叠加层放在单独的 div 中，而不是放在图片标签中。然后在开始字幕 div 之前关闭叠加层 div。然后，您可以将 "thumb" class 设置为在 css 中具有特定的宽度和高度，并将叠加层 div 的样式设置为 height:100% width:100% 以便它完全覆盖您的缩略图。如果绝对定位标题文本，则可以将其放在渐变之上。例如

<div class="titles">
    <div class="thumb">
        <img alt="Shokugeki no Souma: Ni no Sara" src="https://img7.anidb.net/pics/anime/184719.jpg" />
     <div class="overlay"></div>      
            <div class="titulo">Shokugeki no Souma: Ni no Sara</div>
            <div class="epis">Epis. 12</div>
    </div>
</div>

如何使渐变出现在图像之上和文本之后？

How to make the gradient come on top of image and behind the text?

html

css

linear-gradients