グラデーションをイメージの上とテキストの後ろに置く方法を教えてください。

Question

私はイメージの上とテキストの後ろに壮大な場所を置こうとしていますが、Webで見つけられたものから試したものすべてがうまくいきませんでした。 私が作成した他のすべてのテンプレートに同じ画像をCSSコードで適用すると、divソースに画像のソースがある必要があります。

感謝:)

<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を閉じます。次に、あなたのCSSで特定の幅と高さを持つようにあなたの "親指"クラスを設定し、サムネイル画像を完全に覆うようにheight：100％width：100％を持つようにオーバーレイdivをスタイルすることができます。キャプションテキストを絶対的に配置する場合、それをグラデーションの上に置くことができます。例えば

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