今天小编跟大家讲解下有关CSS中使用image data URI来处理图片的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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
来源：爱蒂网
