码迷,mamicode.com
首页 > Web开发 > 详细

HTML让文字在图片上显示的几种方法

时间:2019-07-16 10:43:15      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:bing   一个   ack   blog   之间   rac   mod   box   htm   

第一种方式是image 作为背景图片,即:background:url(".......");

 

 

第二种方式是将img块与文字块(文字块采用span标签显示)放在同一个div 中,然后设置他们之间的位置,例如如下代码块:

 

  1. <div style="position: relative; width: 170px; height: 89px;">

  2. <img src="loading.gif" width="170" height="89" >

  3. <span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>

  4. </div>

 

 

第三种方式是将img块与文字块(文本块存放在div中)放在同一个div 中,然后设置他们之间的位置,例如如下代码块:

 

  1. <div style="position:relative;">

  2.   <img src="loading.gif" />

  3.   <div style="position:absolute; z-index:2; left:10px; top:10px">添加文字...添加文字...添加文字...</div>

  4. </div>

 

HTML让文字在图片上显示的几种方法

标签:bing   一个   ack   blog   之间   rac   mod   box   htm   

原文地址:https://www.cnblogs.com/qcjdp/p/11192988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!