css背景使用base64编码或者将base64编码放在img图片标签中
css背景使用base64编码或者将base64编码放在img图片标签中
将图片转为base64编码然后放在css的background背景中使用或者放在前台 img 图片标签中直接使用
减少HTTP请求,加快小图像或者小图标的加载时间。
// Base64 在CSS中背景图使用
.diymenu {
background-image: url("data:image/png;base64,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");
}
// Base64 在HTML中的使用
<img src="data:image/png;base64,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" />
经过Base64 编码后的文件体积一般比源文件大 30% 左右。
*请上传小于300KB的.jpg/.jpeg/.gif/.bmp/.png/.ico格式图片,不建议将大图转换。
- 相关阅读
- 经典的仿蓝色理想TAB横向下拉菜单效果
- Javascript JS 限制复选框的选择个数(2)
- 实现windows关机效果代码
- 符合标准的正常工作的对联广告(2)
- 一个几个图片来回变幻的超炫的图片转换效果
- 深山留言板V7.0效果
- javascript根据内容转换为拼音
- uni-app基础知识列表渲染
- 共有0条关于《css背景使用base64编码或者将base64编码放在img图片标签中》的评论
- 发表评论
您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。
- 更多>>同类信息
- jquery设置或获取修改classname
- 利用css3.0写出一个音乐播放的唱片碟盘的效果
- 利用css中的scale()实现放大缩小效果
- 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
- css背景使用base64编码或者将base64编码放在img图片标签中
- 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
- 更多>>最新添加文章
- dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
- Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
- 抖音直播音挂载小雪花 懂车帝小程序
- javascript获取浏览器指纹可以用来做投票
- 火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
- 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
- python通过代码修改pip下载源让下载库飞起
- python里面requests.post返回的res.text还有其它的吗