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

第二种方式是将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>

 

HTML让文字在图片上显示的几种方法的更多相关文章

  1. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  2. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  3. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  4. 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  5. Python3 tkinter基础 Label compound 图片上显示文字 fg字体颜色 font字体大小

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  7. JS文件中的中文在网页上显示为乱码解决方法

    转自:http://www.pc6.com/infoview/Article_63835.html 如果JS文件中的中文在网页上显示为乱码,不妨采用本文章中的方法来试一试,或许能解决使你很头疼的问题. ...

  8. Android上显示生僻字的方法

    安卓5.0+是可以显示所有(8万多个)Unicode汉字的,本文介绍显示生僻汉字的方法,这个方法也适用于其它特殊字符. Unicode值在0xFFFF以下的(2万多个简体.繁体)汉字早已被广泛支持,所 ...

  9. 使用CSS为图片添加边框的几种方法

    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...

随机推荐

  1. 关于rss的内容(转载)

    转载自: https://blog.csdn.net/zhao1949/article/details/52806123 (本文对读者有帮助的话请移步支持原作者) 内容记录: 在C++技术网开通了RS ...

  2. sprite学习

    CSS雪碧图,就是把所有的图表,按钮和图形包含在一个图像里面.它要求: 静态图片,不随用户信息变化而变化:小图片,图片容量比较小:加载量比较大. 使用这种技术可以减少Web浏览器发出的服务器请求,显著 ...

  3. org.dom4j.Document 解析xml

    1.Java代码 Document doc = DocumentHelper.parseText(xml); // Element rootE = doc.getRootElement(); List ...

  4. GDSOI2017第三轮模拟4.21 总结

    1 第一题看着就觉得猎奇,于是就想着打暴力就跑. 但是很严重的问题就是... \(D\)和\(B\)打反了,都不知道当时在干什么??? 原本可以拿35. 2 第二题看着就觉得套路,于是想着今天就攻这题 ...

  5. python学习笔记10--协程、IO、IO多路复用

    本节内容 一.协程 1.1.协程概念 1.2.greenlet 1.3.Gevent 1.4.协程之爬虫 1.5.协程之socket 二.论事件驱动与异步IO 三.IO 3.1.概念说明 3.2.IO ...

  6. DX9纹理半像素偏移-Directly Mapping Texels to Pixels

    原文:DX9纹理半像素偏移-Directly Mapping Texels to Pixels 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u01 ...

  7. Duplicate a whole line in Vim

    yy or Y to copy the line or dd to delete (cutting) the line then p to paste the copied or deleted te ...

  8. leaflet的入门开发

    2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...

  9. 微信公众号系统在Linux下的部署操作

    ps -ef | grep tomcat 查看tomcat进程

  10. Mongodb停止和启动

    mongodb开启.停止.重启操作 #开启service mongodb start#停止service mongodb stop#重启service mongodb restart