我们在使用<img>标签和给元素添加背景图片时,不一定要使用外部的图片地址,也可以直接把图片数据定义在页面上。对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。

如何使用

.CSS

p {

background: url(data:image/gif;base64,R0lGOD......jIQA7)

no-repeat left center;

padding: 5px 0 5px 25px;

}

p {

background: url(fakepath/image.gif)

no-repeat left center;

padding: 5px 0 5px 25px;

}

HTML

<img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />

<img src="fakepath/image.gif" />

语法:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

* data的一些类型:

* data:,<文本数据>

* data:text/plain,<文本数据>

* data:text/html,<HTML代码>

* data:text/html;base64,<base64编码的HTML代码>

* data:text/css,<CSS代码>

* data:text/css;base64,<base64编码的CSS代码>

* data:text/javascript,<Javascript代码>

* data:text/javascript;base64,<base64编码的Javascript代码>

* data:image/gif;base64,base64编码的gif图片数据

* data:image/png;base64,base64编码的png图片数据

* data:image/jpeg;base64,base64编码的jpeg图片数据

* data:image/x-icon;base64,base64编码的icon图片数据

好处:

减少HTTP请求

浏览器兼容性:

IE7及以下不支持。有如下解决方案:

使用IE条件注释

<!--[if lt IE 8]>

...... IE7及以下内容 ......

<![endif]-->

* CSS Hack

*background-image:url(sprite.png); /* Only IEv6 & 7 see this */

你还应该知道的:

l  转化之后的图片代码通常比图片本身要大。

l  IE8支持的最大内嵌图片代码为32768个字节

l  以data形式插入图片不是万能的,很多情况下,插入一张图片反而易于修改和维护。

插入图片新方式:data:image的更多相关文章

  1. Latex插入图片 分类: LaTex 2014-11-18 20:07 261人阅读 评论(0) 收藏

    在Latex中插入图片的方式很多,我这里只介绍自己常用的一种方式,欢迎大家指导. 我习惯于使用graphicx宏包来插入图片,有时候会配合上subfigure宏包来同时插入多幅图片组合. 首先,需要在 ...

  2. CSDN-markdown语法之怎样插入图片

    文件夹 图片上传方式 插入在线图片 插入本地图片 图片链接方式 行内式图片链接 參考式图片链接 几个问题探讨 问题1:图片上传和图片链接两种方式的差别 问题2:Markdown中怎样指定图片的高和宽? ...

  3. MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  4. Java利用poi生成word(包含插入图片,动态表格,行合并)

    转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...

  5. javaWeb项目springMVC框架下利用ITextpdf 工具打印PDF文件的方法(打印表单、插入图片)

    方法一:打印PDF表单以及在PDF中加入图片 需要的资料: jar包:iTextAsian.jar ,itext-2.1.7.jar: 源码: public static void main(Stri ...

  6. 实现在edittext中任意插入图片

    Myedittext: public class MyEditText extends EditText { public MyEditText(Context context) { super(co ...

  7. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  8. C# 操作Word书签(二)——插入图片、表格到书签;读取、替换书签

    概要 书签的设置可以帮助我们快速的定位某段文字,使用起来很方便,也很节省时间.在前一篇文章“C# 如何添加/删除Word书签”中介绍了插入.删除书签的方法,本篇文章将对C# 操作Word书签的功能做进 ...

  9. Java编辑PDF写入文字 插入图片

    package com.test; import com.itextpdf.text.BaseColor; import com.itextpdf.text.Font; import com.itex ...

随机推荐

  1. postgresql逻辑结构--触发器(三)

    触发器(tigger)是一种由事物自动触发执行的特殊存储过程,这些事件可以是对一个表进行INSERT.UPDATE.DELETE等操作. 一.创建触发器 create   [ constraint ] ...

  2. Charles抓包实战详解

    访问我的博客 前言 通过上一篇文章,想必你已经掌握了如何正确安装抓包神器 Charles,如果还是抓不了包,可以再看看. 今天要做是抓包实战,因为我在做网络文学的公司就职,所以就拿网络文学的 APP ...

  3. elasticSearch6源码分析(12)DiscoveryModule

    1.DiscoveryModule概述 /** * A module for loading classes for node discovery. */ 2.discovery The discov ...

  4. 百度全站 https FAQ:技术宅告诉你如何搜索更安全

    百度从 14 年开始对外开放了 https 的访问,并于 3 月初正式对全网用户进行了 https 跳转. 你也许会问,切换就切换呗,和我有啥关系?我平常用百度还不是照常顺顺当当的,没感觉到什么切换. ...

  5. 项目复审——Alpha阶段

    Deadline: 2018-5-19 10:00PM,以提交至班级博客时间为准. 5.10实验课上,以(1.2班级,3.4班级为单位)进行项目复审.根据以下要求,完成本团队对其他团队的复审排序. 参 ...

  6. map映照容器(常用的使用方法总结)

    map映照容器的数据元素是由一个键值和一个映照数据组成的,键值和映照数据之间具有一一对应的关系.map与set集合容器一样,不允许插入的元素的键值重复. /*关于C++STL中map映照容器的学习,看 ...

  7. C# 在webapi项目中配置Swagger(最新版2017)

    这篇文章已经过时了: http://www.cnblogs.com/alunchen/p/6888002.html 不用那么繁琐的配置了,直接导入一个包就行了: Install-Package Swa ...

  8. CPU简单科普

    CPU简单科普 本文仅限于对小白科普. 误解一:CPU使用率和硬盘使用率一样. 误解二:一台电脑只有一个CPU. 误解三:CPU的核数,就是CPU的数量. 误解三:CPU主频越高越厉害:CPU核数越多 ...

  9. centos7下没有iptables

    从centos7开始使用linux,之前版本的没有深入了解过,今天要开放个端口,需要有防火墙的相关操作,从网上查资料都是编辑/etc/sysconfig目录下面的iptables文件,可我进入这个文件 ...

  10. 漫画 | Java多线程与并发(二)

    1.什么是线程池? 为什么要使用它? 2.Java中invokeAndWait 和 invokeLater有什么区别? 3.多线程中的忙循环是什么? 4.Java内存模型是什么? 线程内的代码能够按先 ...