CSS中应用image data URI来解决照片的方式

日期:2021-03-05 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

将要照片資源变换为 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 恳求
    防止一些文档跨域
    无照片缓存文件等难题(可是1般 css 也是有缓存文件的好不太好)

缺陷

    适配性 ( IE6,7 兼容问题, 可使用 MHTML 来处理 )
    访问器不容易缓存文件该照片(这里是不是是这样我存有疑虑,由于仿佛看上去也是第1次载入的情况下慢)
    提升 css 文档尺寸
    编号成本费及维护保养(展现不直观,现阶段需手动式变换,我临时不知道道全自动更换之类的软件)
    以前有看到过篇测评说特性上比 sprite 很弱1些,1時间找不到连接

综合性起来,data URI可使用在
* 照片规格很小,应用1条 http 恳求有点消耗,如渐变色情况框
* 照片在全站大经营规模应用,且非常少被升级的,如 loading

上一篇:浅谈CSS字体样式的载入加快难题 返回下一篇:没有了