手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS中使用image data URI来处理图片的方法
CSS中使用image data URI来处理图片的方法
摘要:即将图片资源转换为base64字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。如:使用方式CSSCode复制内容到剪贴板/**数据格...

即将图片资源转换为 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

【CSS中使用image data URI来处理图片的方法】相关文章:

一种比CSS-Sprite更加方便在网页中嵌入大量图标的方法

在CSS中关于字体处理效果的思考

CSS中几种常见的注释

使用css的background:url设置背景图方法

CSS之DIV长度相等的几个办法

CSS实现圆柱型数据报表的方法

CSS图片垂直居中方法整理集合

使用Div+CSS布局设计网站的优点

CSS div居中的三种方法

CSS中background-position使用技巧

精品推荐
分类导航