カスケーディングスタイルシート（CSS） - スクロールの画像の上にポストを作成する

Question

画像の上にテキストを表示する方法を尋ね、そのファイルは下の図のようにスクロールバーの中にあります。 Googleで検索し、使用した位置は検索されましたが、機能しませんでした。解決策を見つけるのを手伝ってくれることを願っています。

写真とテキストは、親のdivを追加し、画像の背景を設定し、スクロール

Answer 1

に含まれています。次に、テキストを含む子/ネストされたdivまたは見出しタグを追加できます。

以下の擬似コードを参照してください。私はコードをテストしませんでしたが、それは正しい軌道上であなたを得るのに十分であるはずです。

CSS

#container-img{ 
    height: 500px; /* set the height you want the image to be */ 
    width: 500px; /* set the width of the image */ 
    background: url('your-img-src-here.png') no-repeat center center; 
     /* you can add whatever sizing and alignment after the url*/ 
} 
#child-txt{ 
    font-size: 14px; 
    font-weight: bold; 
    text-align: left; 
    padding: 5px; 
} 

HTML

<div id="container-img"> 
    <div id="child-txt"> Cool Text Here! </div> 
</div> 

それは、あなたの質問に答える場合、答えとしてそれをマークしておいてください。 =）

Answer 2

まず、画像とテキストでブロックを作成する必要があります。

ブロックの位置：相対とテキストの位置：絶対。

スクロールバーとは、すべての写真が入っているコンテナがありますが、それは小さいので、オーバーフローを使用することを意味します。スクロール。

は、ここでのコード例を参照してください。https://codepen.io/alex_ukr/pen/QgVzeL

body { 
 
    background-color: lightblue; 
 
} 
 

 
.main-container { 
 
    width: 450px; 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
    border: 5px solid red; 
 
    background-color: white; 
 
} 
 
.picture-container { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
img { 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: 10px; 
 
    font-size: 20px; 
 
}

<div class="main-container"> 
 
    <div class="picture-container"> 
 
    <img src="https://uploads.scratch.mit.edu/users/avatars/1385/1878.png" alt=""> 
 
    <span>your text</span> 
 
    </div> 
 
    <div class="picture-container"> 
 
    <img src="https://uploads.scratch.mit.edu/users/avatars/1385/1878.png" alt=""> 
 
    <span>your text</span> 
 
    </div> 
 
    <div class="picture-container"> 
 
    <img src="https://uploads.scratch.mit.edu/users/avatars/1385/1878.png" alt=""> 
 
    <span>your text</span> 
 
    </div> 
 
    <div class="picture-container"> 
 
    <img src="https://uploads.scratch.mit.edu/users/avatars/1385/1878.png" alt=""> 
 
    <span>your text</span> 
 
    </div> 
 
</div>