CSS中利用图像数据URI处理的方法

本文主要介绍了利用图像数据的URI在CSS处理图片的方式，图像数据的URI将图片base64字符格式，你可以参考它如果你需要朋友。
图像资源转换成base64字符串格式的页面中嵌入或风格。所以即使请求的链接图片的保存。
如：
使用模式
CSS代码将内容复制到剪贴板。
***数据格式
数据：图像/格式；base64，ivborw0kgaaaansuheugaaaa4aaaaocayaaaafsc3raaaabhncsvqicagifahkiaaaaalwsflzaaalewaacxmbajqcgaaaae1jrefukjhv0meowcaia9dw7mp983pymuaweluv8iaabjfujdwonqeed0 / iwwhk8qatsylgfihezm9woc8jsqaotvmqtzy1u + z6449ga9r24d4iz6wwaaaaaelftksuqmcc。

***样式引用
。图标{
宽度：30px；身高：30px；
背景图像：URL（数据：图像/格式；base64，ivborw0kgaaaansuheugaaaa4aaaaocayaaaafsc3raaaabhncsvqicagifahkiaaaaalwsflzaaalewaacxmbajqcgaaaae1jrefukjhv0meowcaia9dw7mp983pymuaweluv8iaabjfujdwonqeed0 / iwwhk8qatsylgfihezm9woc8jsqaotvmqtzy1u + z6449ga9r24d4iz6wwaaaaaelftksuqmcc）；
}

标签的语法：

数据：获取数据协议
图片PNG：获取数据的协议名称（注意图片资源也可以使用字体等）
Base64编码数据：
ivbor…：编码数据

优势

减少HTTP请求
避免某些文件跨域
没有图片缓存和其他问题（但CSS也被缓存）

缺点

兼容性（ie6,7不合，MHTML可以用来解决）
浏览器不会缓存图片（我怀疑这是不是真的，因为它看起来很慢）。
增加CSS文件的大小
编码成本和维护（显示不直观，现在需要手动转换，我不知道插件，如自动更换暂时）
前面已经看到，评论的性能比雪碧弱，一次也找不到链接。

结合起来，可以使用数据URI。
*图片的大小非常小，HTTP请求有点浪费，比如渐变背景框。
*图像广泛使用在整个车站，很少更新，如加载。