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

发布时间:2021-09-17 17:35:01 作者:柒染
来源:亿速云 阅读:113

CSS中使用image data URI来处理图片的方法是怎样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

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

CSS Code复制内容到剪贴板

  1. /** 数据格式 **/  

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

  3.   

  4. /** 样式引用 **/  

  5. .icon{   

  6.     width30pxheight30px;   

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

  8. }  

标签语法:

    data : 取得数据协议
    image/png : 取得数据的协议名称(注意这里也图片资源也可以使用字体等)
    base64 : 数据编码方式
    iVBOR... : 编码后数据

优点

    减少 HTTP 请求
    避免某些文件跨域
    无图片缓存等问题(但是一般 css 也是有缓存的好不好)

缺点

    兼容性 ( IE6,7 不兼容, 可以使用 MHTML 来解决 )
    浏览器不会缓存该图片(这里是否是这样我存有疑惑,因为好像看上去也是第一次加载的时候慢)
    增加 css 文件大小
    编码成本及维护(展示不直观,目前需手动转换,我暂时不知道自动替换之类的插件)
    之前有看到过篇测评说性能上比 sprite 微弱一些,一时间找不到链接

综合起来,data URI可以使用在
* 图片尺寸很小,使用一条 http 请求有点浪费,如渐变背景框
* 图片在全站大规模使用,且很少被更新的,如 loading

看完上述内容,你们掌握CSS中使用image data URI来处理图片的方法是怎样的的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 【移动开发】Android图片异步加载之Android-Universal-Image-Loader使用
  2. 对python PLT中的image和skimage处理图片方法详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css uri

上一篇:php如何将小写字母转为大写

下一篇:php中is_array()的用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》