级联样式表（CSS） - 在滚动条的图像上方创建帖子

Question

我想问如何显示图像上方的文本，并且文件位于滚动条内，如下图所示。 我搜索了谷歌和使用的位置，但它没有奏效。我希望你能帮我找到解决办法。

图片和文本包含在滚动

Answer 1

添加父DIV和背景设置为一个图像。然后你可以在其中添加一个子/嵌套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>