如何在图像上显示段落？(How can I display a paragraph over image?)

我有这个代码：

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

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

我怎么解决这个问题？

你可以帮帮我吗？

提前致谢！

I have this code:

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

I want to display a paragraph over image.

How can i solve this problem?

Could you help me?

Thanks in advance!

最满意答案

解决方案1：背景图像

您可以使用背景图像，在css中设置背景图像：

div{
  height:300px;
  width:300px;
  background:url(http://placekitten.com/g/300/300);
  } 
  
<div>This is some text</div> 
  
 
 
 
 解决方案2：绝对定位 
 
 或者，您可以使用绝对定位，将段落“绝对”放在图像元素上： 
 
 
 
  
  
ul {
  list-style: none;
}
li {
  position: relative;
}
li p {
  position: absolute;
  top: 0;
  left: 0;
  color:red;
} 
  
<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> 
  
 
Solution 1: Background Image
 
You could use a background image for this, setting the background image in your css instead:
 
 
 
  
  
div{
  height:300px;
  width:300px;
  background:url(http://placekitten.com/g/300/300);
  } 
  
<div>This is some text</div> 
  
 
 
 
Solution 2: Absolute positioning
 
Or, you could use absolute positioning, placing the paragraph 'absolutely' over the image element:
 
 
 
  
  
ul {
  list-style: none;
}
li {
  position: relative;
}
li p {
  position: absolute;
  top: 0;
  left: 0;
  color:red;
} 
  
<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>