如何在图像上显示段落？

Question

我有这段代码：

    <ul class="lista_sus">                       
     <li><img src="image/1.png" alt="Smiley face" height="250" width="250"></li>
     <li><img src="image/2.png" alt="Smiley face" height="250" width="250"></li>
     <li><img src="image/3.png" alt="Smiley face" height="250" width="250"></li>
   </ul>

我想在图像上显示一个段落。

我该如何解决这个问题？

你能帮帮我吗？

提前致谢！

Answer 1

解决方案1：背景图像

您可以使用背景图片，而不是在css中设置背景图片：

＆＃13;

＆＃13;

div{
  height:300px;
  width:300px;
  background:url(http://placekitten.com/g/300/300);
  }

＆＃13;

<div>This is some text</div>

＆＃13;

＆＃13;

＆＃13;

---

解决方案2：绝对定位

或者，你可以使用绝对定位，绝对放置段落＆＃39;在图像元素上：

＆＃13;

＆＃13;

ul {
  list-style: none;
}
li {
  position: relative;
}
li p {
  position: absolute;
  top: 0;
  left: 0;
  color:red;
}

＆＃13;

<ul class="lista_sus">

  <li>
    <img src="http://placekitten.com/g/300/200" alt="Smiley face" height="250" width="250">
    <p>This is a load of text</p>
  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.container {
  position : relative;
  display : inline-block;
  background : red;
  width : 200px;
}

.image {
  position : absolute; 
  margin : 0;
  padding : 0;
  width : 200px;
}

.textOverImage {
  position : absolute;  
  width : 100%
  color : white;
  margin : 0;
  padding : 0;
}

<div class="container">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQ4H3lSqu-QV2NrIYISCtd9WUPQf0B7zxBsjJzojdUJwMVGNNIjv4qZwo" class="image" />
  <p class="textOverImage">
    Some texts over the image
    </p>
  </div>

我使用<div>（也可能是<li>来包含图片和段落。

• 容器获取position : relative CSS proprety，并应指定宽度才能正常工作
• 包含（图片，段落）获取position : absolute

我让你在任何你想要的地方移动段落。