第一种方式是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. nginx反项代理的简单配置

    在ubuntu 16.04下安装nginx, apt-get install nginx就可以了. 然后安装了node, npm, 写了个简单的main.js,启动了一个http,并监听 8888 然 ...

  2. org.apache.jasper.JasperException: xxxx.jsp(118,24) Attribute style invalid for tag formatNumber according to TLD

    错误:org.apache.jasper.JasperException: /projm/projBudgetChangeOverview.jsp(118,24) Attribute style in ...

  3. Codeforces Round #410 (Div. 2) A. Mike and palindrome【判断能否只修改一个字符使其变成回文串】

    A. Mike and palindrome time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  4. SpringBoot实战之异常处理篇

    在互联网时代,我们所开发的应用大多是直面用户的,程序中的任何一点小疏忽都可能导致用户的流失,而程序出现异常往往又是不可避免的,那该如何减少程序异常对用户体验的影响呢?其实方法很简单,对异常进行捕获,然 ...

  5. 重磅发布:阿里开源 Open JDK 长期支持版本 Alibaba Dragonwell

    3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell.作为 Java 全球管理组织 Java Community Process ...

  6. qt获取本机ip

    //获取本机IP QString getIP(QString localHost) { QString ipAddr; #if 0 QList<QHostAddress> AddressL ...

  7. Codeforces 442A

    题目链接 A. Borya and Hanabi time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  8. IDEA 运行maven项目配置

  9. fedora下eclipse安装tomcat插件

    首先下载tomcat插件: http://www.eclipsetotale.com/tomcatPlugin.html,下载最新的3.3版本: 由于我的eclipse是通过yum自动安装的,因此ec ...

  10. SDUT-2498_AOE网上的关键路径

    数据结构实验之图论十一:AOE网上的关键路径 Time Limit: 2000 ms Memory Limit: 65536 KiB Problem Description 一个无环的有向图称为无环图 ...