Question

我一直在尝试将广告放在图像的顶部和文本的背后，但我尝试从网上找到的所有东西都没有用。我需要在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。然后你可以设置你的拇指＆＃34;在css中具有一定宽度和高度的类，并将叠加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>

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

1 个答案: