第一种方式是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. Header解析

    不管是作为后端还是前端开发人员,对于web请求的过程和参数都是需要了解的. 下面是对一次简单的http请求的header分析,作为自己的一个总结,也希望对大家有所帮助. 以Chrome为例: 我们对h ...

  2. 在notepad++中tab和空格的区别

    在notepad++中实现tab和空格不通用的问题 方式一: 方式二:

  3. HTML 实体字符

    有些字符,像(<)这类的,对HTML来说是有特殊意义的,所以这些字符是不允许在文本中使用的.要在HTML中显示(<)这个字符,我们就必须使用实体字符. 实体字符 有一些字符对HTML来讲是 ...

  4. 关于PHP学习--摘自知乎

    主要是学框架(其实也没啥可学的).数据库.服务器.linux. 所以我推荐apache/nginx文档,框架的文档,mysql的文档,linux使用说明,等等等等. PHP: PHP 手册MySQL ...

  5. 第一章 Web应用程序开发基础

    一.HTTP协议工作机制 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它是一种主流B/S架构中应用的通信 ...

  6. 利用幂等性区分HTTP的POST与PUT请求

    1.什么是幂等性 幂等性概念:幂等通俗来说是指不管进行多少次重复操作,都是实现相同的结果. 2.REST请求中哪些是幂等操作 GET,PUT,DELETE都是幂等操作,而POST不是,以下进行分析: ...

  7. day39-Spring 03-JDK的动态代理

    package cn.itcast.spring3; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Meth ...

  8. hackerrank---Sets - Symmetric Difference

    题目链接 集合操作 附上代码: M = int(input()) m = set(map(int, raw_input().strip().split())) N = int(input()) n = ...

  9. redis 如何查看版本

    ./redis-cli -h 127.0.0.1 info | grep 'redis_version' redis-server -v

  10. json,pickle模块

    序列化 把对象从内存中编成可储存或传输的过程称之为序列化,输出为json串,.json文件 反序列化 把json串反编成Python数据类型 json模块 用于跨平台交互 json模块下不可转换集合( ...