层叠样式表（CSS） - 在滚动中创建图像上方的帖子

Question

我想询问如何在图像上方显示文本，文件位于滚动条内，如下图所示。 我在google上搜索并使用了位置，但它没有用。我希望你能帮助我找到解决方案。

滚动中包含的图片和文字

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;