如何在图像上显示段落?(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>
更多推荐
发布评论