Html 如何使渐变位于图像顶部和文本后面？

我一直试图把grandient放在图片的顶部和文本的后面，但我在网络上找到的一切都不起作用。 我需要在div中有图像的源代码，因为如果它在css代码中，它会将相同的图像应用于我创建的所有其他模板

谢谢：）

---

当您尝试实现此功能时，是否介意再解释一下出错的地方

我的建议是将覆盖放在它自己单独的div中，而不是放在图像标签中。然后在开始标题div之前关闭覆盖div。然后可以在css中将“thumb”类设置为具有一定的宽度和高度，并将覆盖div设置为高度：100%宽度：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>

Shokugeki没有Souma:我没有Sara
埃普斯。12

您好，感谢您的回复，当我尝试实现渐变时，它总是停留在图像的后面，我按照您解释的方式进行了“尝试”（2周前刚开始使用html+css编码，所以我还没有真正的经验，所以我不确定是否正确），同样使用z-index并改变绝对/相对位置，但迄今为止，我所能得到的最接近的结果是这样的：我在图像的url中添加了一个字母，这样它最终会在url路径中出现错误，结果是这样的，渐变就在文本后面。我在这里分叉了你的代码笔，并实现了我上面的建议：这就是你想要实现的吗？我想向你展示一下它在网站上的外观，但似乎我们无法向用户发送消息。

.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);
}

<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>