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

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

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

例如如下代码块:

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

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

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

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

  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>

    原文作者:zhengbingmei
    原文地址: https://blog.csdn.net/zhengbingmei/article/details/81134759
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞