插入图片新方式:data:image
我们在使用<img>
标签和给元素添加背景图片时,不一定要使用外部的图片地址,也可以直接把图片数据定义在页面上。对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。
如何使用
.CSS
p {
background: url(data:image/gif;base64,R0lGOD......jIQA7)
no-repeat left center;
padding: 5px 0 5px 25px;
}
或
p {
background: url(fakepath/image.gif)
no-repeat left center;
padding: 5px 0 5px 25px;
}
HTML
<img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />
或
<img src="fakepath/image.gif" />
语法:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
* data的一些类型:
* data:,<文本数据>
* data:text/plain,<文本数据>
* data:text/html,<HTML代码>
* data:text/html;base64,<base64编码的HTML代码>
* data:text/css,<CSS代码>
* data:text/css;base64,<base64编码的CSS代码>
* data:text/javascript,<Javascript代码>
* data:text/javascript;base64,<base64编码的Javascript代码>
* data:image/gif;base64,base64编码的gif图片数据
* data:image/png;base64,base64编码的png图片数据
* data:image/jpeg;base64,base64编码的jpeg图片数据
* data:image/x-icon;base64,base64编码的icon图片数据
好处:
减少HTTP请求
浏览器兼容性:
IE7及以下不支持。有如下解决方案:
使用IE条件注释
<!--[if lt IE 8]>
...... IE7及以下内容 ......
<![endif]-->
* CSS Hack
*background-image:url(sprite.png); /* Only IEv6 & 7 see this */
你还应该知道的:
l 转化之后的图片代码通常比图片本身要大。
l IE8支持的最大内嵌图片代码为32768个字节
l 以data形式插入图片不是万能的,很多情况下,插入一张图片反而易于修改和维护。
最新文章
- Jquery元素选取、常用方法
- QT 记事本小程序
- NuGet打包推送批处理以及MSBuild(通用版)
- HDU 4648 Magic Pen 6
- 【转】Dancing Links精确覆盖问题
- Hive基础介绍
- OpenCV快速遍历矩阵元素方法
- [转载]C#图片格式(JPG,BMP,PNG,GIF)等转换为ICO图标
- Android(java)学习笔记173:BroadcastReceiver之 静态注册 和 动态注册
- IOS-UITableView开发常用各种方法总结
- c语言,volatile
- MySql之ALTER命令用法详细解读(转)
- SQL数据库的多表查询
- 18-11-05ie 热键的使用
- 腾讯云的基本配置(centos 7.1)及mysql的使用
- 札记:翻译-使用Scene和Transition实现【场景切换】动画效果
- 使用Chrome开发者工具远程调试原生Android上的H5页面
- XenServer虚拟化环境安装记录
- angular模块
- 第1天:Django框架简介与工程创建
热门文章
- 一次完整的HTTP接口请求过程及针对优化
- 【胡思乱想】命令模式 与 Thread Runnable
- Spring MVC - MultipartFile实现文件上传(单文件与多文件上传)
- php功底你修炼到哪一级
- 小程序实例:用js方法splict()、indexOf()、push()、replace()等操作数组Array的增删改查
- Windows安装Apache2.4和PHP5.6
- git将本地项目发布到远端
- MVC应用程序实现会员登录功能
- angularjs学习第一天笔记
- SQL Server T—SQL 语句【建 增 删 改】(建外键)