css不支持data image,CSS_CSS中使用image data URI来处理图片的方法，即将图片资源转换为 base64 字

CSS中使用image data URI来处理图片的方法

即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。

如：

使用方式

CSS Code复制内容到剪贴板

/** 数据格式 **/

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/** 样式引用 **/

.icon{

width:30px;height:30px;

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);

}

标签语法：

data : 取得数据协议

image/png : 取得数据的协议名称(注意这里也图片资源也可以使用字体等)

base64 : 数据编码方式

iVBOR... : 编码后数据

优点

减少 HTTP 请求

避免某些文件跨域

无图片缓存等问题(但是一般 css 也是有缓存的好不好)

缺点

兼容性 ( IE6,7 不兼容, 可以使用 MHTML 来解决 )

浏览器不会缓存该图片(这里是否是这样我存有疑惑，因为好像看上去也是第一次加载的时候慢)

增加 css 文件大小

编码成本及维护(展示不直观，目前需手动转换，我暂时不知道自动替换之类的插件)

之前有看到过篇测评说性能上比 sprite 微弱一些，一时间找不到链接

综合起来，data URI可以使用在

* 图片尺寸很小，使用一条 http 请求有点浪费，如渐变背景框

* 图片在全站大规模使用，且很少被更新的，如 loading相关阅读:

iOS开发基础之C语言

微信公众平台开发入门教程(SAE方倍工作室)

C#实现Ruby的负数索引器

WIN8开机慢!磁盘占用100%的终极解决方法

JCrop+ajaxUpload 图像切割上传的实例代码

Swift的74个常用内置函数介绍

正则表达式常用元字符整理小结

jQuery中Form相关知识汇总

利用java反射机制调用类的私有方法(推荐)

js改变css样式的三种方法推荐

浅谈C++指针(必看)

Win10 10525预览版桌面上的水印怎么删除？

CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨

Android中AlarmManager基本用法分析

css不支持data image,CSS_CSS中使用image data URI来处理图片的方法，即将图片资源转换为 base64 字 - phpStudy...相关推荐

将光盘中的Packages目录通过cp命令拷贝/data/centos7/packages中,然后将/data/centos7做成本地yum仓库
文章目录 6 软件管理 6.5 将光盘中的Packages目录通过cp命令拷贝/data/centos7/packages中,然后将/data/centos7做成本地yum仓库 6 软件管理 6.5 ...
风向风速图将Series中的风向风速数据data和xAxis中的时间data一一对应
进入正题之前,先讲一讲只有一条风向风速曲线的对应方法(ps:我遭遇的需求是多条风向风速曲线,且每条曲线在某个时间点不一定有数据,这就需要你每条曲线的每个拐点都得和X轴的时间相对应才可): var sy ...
Bootstrap data类型的Url格式--url(data:image/gif;base64,AAAA)：把小数据直接嵌入到Url中
原文链接http://shiyun1013.blog.163.com/blog/static/1077403620111113234714/ 所谓"data"类型的Url格式,是在 ...
data类型的Url格式--url(data:image/gif;base64,AAAA)：把小数据直接嵌入到Url中
所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag,哪 ...
Background中data类型的Url格式url(data:image/gif;base64,AAAA)把小数据直接嵌入到Url中
原文地址:http://blog.csdn.net/zuo_hy/article/details/38866935 所谓"data"类型的Url格式,是在RFC2397中提出的,目 ...
Winform中使用Mysql.Data.dll实现连接Mysql数据库并执行sql语句(排除ddl等非法语句的执行)
场景 Winform中连接Mysql8并查询表中数据进行显示: Winform中连接Mysql8并查询表中数据进行显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客与上面实现的流程类似 ...
在Data Lake Analytics中使用视图
在Data Lake Analytics中使用视图 1. 概述在Data Lake Analytics(以下简称DLA)中使用视图(VIEW)功能,可以大大简化对于重复SQL,特别是较为复杂的SQL ...
在Data Lake Analytics中使用视图 1
在Data Lake Analytics中使用视图 1. 概述在Data Lake Analytics(以下简称DLA)中使用视图(VIEW)功能,可以大大简化对于重复SQL,特别是较为复杂的SQL ...
【GNN】task1-简单图论 Data类-PyG中图的表示及使用
文章目录学习心得: 第一部分:开篇为什么要在图上进行深度学习? 问题的分类将神经网络应用于图的挑战参考资料第二部分:环境配置第三部分:简单图论图结构数据一.图的表示先介绍几种图概念 ...

css不支持data image,CSS_CSS中使用image data URI来处理图片的方法，即将图片资源转换为 base64 字 - phpStudy...

css不支持data image,CSS_CSS中使用image data URI来处理图片的方法，即将图片资源转换为 base64 字 - phpStudy...相关推荐

最新文章

热门文章