900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html 文字在图片上显示

html 文字在图片上显示

时间:2022-07-12 23:13:29

相关推荐

html 文字在图片上显示

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

例如如下代码块:

<div style="background:url('loading.gif') no-repeat;width:100px;height:50px">添加文字...添加文字...添加文字...</div>

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

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

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

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

</div>

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

<div style="position:relative;">

<img src="loading.gif" />

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

</div>

如果想限制img 标签的最大宽高,可以用max-width 和max-height 这两个属性,如下代码:

<img src="......" style="max-width:100px; max-height:100px" />

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。