没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
1页
即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。如:使用方式 CSS Code复制内容到剪贴板 /** 数据格式 **/ [removed]iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTv
资源推荐
资源详情
资源评论
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
资源评论
weixin_38742421
- 粉丝: 2
- 资源: 954
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功