插入图片新方式:data:image
我们在使用<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的更多相关文章
- Latex插入图片 分类: LaTex 2014-11-18 20:07 261人阅读 评论(0) 收藏
在Latex中插入图片的方式很多,我这里只介绍自己常用的一种方式,欢迎大家指导. 我习惯于使用graphicx宏包来插入图片,有时候会配合上subfigure宏包来同时插入多幅图片组合. 首先,需要在 ...
- CSDN-markdown语法之怎样插入图片
文件夹 图片上传方式 插入在线图片 插入本地图片 图片链接方式 行内式图片链接 參考式图片链接 几个问题探讨 问题1:图片上传和图片链接两种方式的差别 问题2:Markdown中怎样指定图片的高和宽? ...
- MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- Java利用poi生成word(包含插入图片,动态表格,行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
- javaWeb项目springMVC框架下利用ITextpdf 工具打印PDF文件的方法(打印表单、插入图片)
方法一:打印PDF表单以及在PDF中加入图片 需要的资料: jar包:iTextAsian.jar ,itext-2.1.7.jar: 源码: public static void main(Stri ...
- 实现在edittext中任意插入图片
Myedittext: public class MyEditText extends EditText { public MyEditText(Context context) { super(co ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- C# 操作Word书签(二)——插入图片、表格到书签;读取、替换书签
概要 书签的设置可以帮助我们快速的定位某段文字,使用起来很方便,也很节省时间.在前一篇文章“C# 如何添加/删除Word书签”中介绍了插入.删除书签的方法,本篇文章将对C# 操作Word书签的功能做进 ...
- Java编辑PDF写入文字 插入图片
package com.test; import com.itextpdf.text.BaseColor; import com.itextpdf.text.Font; import com.itex ...
随机推荐
- 基于boot2docker部署Docker环境
Docker轻量级的特性使得我们可以快速打包开发环境:一处编译,到处使用.我们可以在第一次编译好需要的开发环境,然后把镜像导出打包,只有有docker环境,便可以快速还原原来的开发环境. 很常用的一个 ...
- zmq 三种模型的python实现
1.Request-Reply模式: 客户端在请求后,服务端必须回响应 server: #!/usr/bin/python #-*-coding:utf-8-*- import time import ...
- nginx的一次跨域处理
1.事故 访问图片资源的时候,发生了跨域,具体报错如下所示: 403 Response to preflight request doesn't pass access control check: ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- 1.C#知识点:值类型和引用类型
一.什么是值类型?什么引用类型? 1.值类型的值是存储在栈上的.引用类型是存在堆上的. 2.值类型变量声明之后,不管是否已经分配内存,编译器在堆上为其分配内存. 3.引用类型声明的时候,这时候只在 ...
- hive 中的正则表达式
背景: 前几天拿来apache日志,用hive的正则进行匹配,发现匹配出来的字段算是NULL,但是我用RegexBuddy工具显示能够匹配的到啊!例子如下(我拿正常的apache日志来比较,我的apa ...
- Android - 内存泄漏 + 垃圾回收(GC)概念
Android内存泄露——全解析和处理办法 内存泄露 说到内存泄露,就不得不提到内存溢出,这两个比较容易混淆的概念,我们来分析一下. 内存泄露:程序在向系统申请分配内存空间后(new),在使用完毕后未 ...
- MySQL设计之三范式的理解
转自:https://blog.csdn.net/wangqyoho/article/details/52900585 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要 ...
- contenttypes组件 (处理大量外键)
介绍 Django contenttypes是一个非常有用的框架,主要用来创建模型间的通用关系(generic relation). https://www.cnblogs.com/huchong ...
- Hadoop Mapreduce 参数 (二)
MergeManagerImpl 类 内存参数计算 maxInMemCopyUse 位于构造函数中 final float maxInMemCopyUse = jobConf.getFloat(MRJ ...