一站式百度SEO排名优化!-找老刘SEO低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>网站建设

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

首页 2020-05-06 网站建设 40 ℃ Tags:


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

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

例如如下代码块:


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



搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  •  
    联系老刘手机
    13524017402
    联系老刘微信
    扫描微信二维码