★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

css背景使用base64编码或者将base64编码放在img图片标签中

 2020/5/4 15:19:18  字体:  浏览 269 我要评论
当前标签
base64

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,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAGi0lEQVR4Xu2baYgcRRTH/28mmeoeE9GgguKnoCh+8UOiqNF47MxsjBfq9oriRUBFjOIFIiJGCUHR4BlRUcQTMcaQy2S7J7dGo8ZICCHEJd63yRp3Z3p6NjtPerKG2WN2uqpm1mW26mu/36uqH6+6q6drCKZpGSAt2sAwAjWLwAg0AjUNaOKmAo1ATQOauKlAI1DTgCZuKtAI1DSgiZsKNAI1DWjipgKNQE0Dg3CrIzEPcWojYCoY+wF8S4Qn8qlg5XA9mQqssGJnxXIwLhtOFJf40UJrcd7ga0ZgvxHbE+sBXFCtnhn4p0R8djFV3FUZYwQCqCWvQtjzfjq4ywisXLY1Km9ARTI6/UxwshEYcdkOWc5EXX6qMMUIlFu2lb62+elg+rgXKHHPG1CERJibTwWLxrVAZXngN/Pp4k3jehujKg/AEj8VOCDwuBWoLI+x1P87cNCOvnH7JmJ7Yh2ACxVe+pb5RwcOpqO3Gtv0G2nbE1kALdLyGCv8g4GD2QhGYptaYNIVLhPS0vKAVf4RgYNz4Ndim1aglRWriTGrloDB15mxusCBg1bkorBNKdDyxCoCZkcRUBnDQEfBDhyci+6obNMJtD2xAsClUQX8F0cMT1DgdKVxQIZtKoG2J5YBuFxGQH/s2oQVOAfOQ5cs2zQC7az4EIwrZQUAWD+BEk53qnufAtscx9tsT3wA4GoFARvjYqLTM7PnTwW2jNSswEmbJh3LueLxuYuLO1Q7aSRne+J9AI5CH5tjNMHJpXK/K7CHkaoCk66YzcQPA3RWf/TPABb76eAenQ7rydqe9R7A1yjk/IRE3MnPzP+qwA5AhhVouWIVUdVtwAY/Hai8FumOdQBvu9a7IL5WPil/iljc8Vv8sCC02xCBtpe4CqAlI2UmhpvPBK3avSsmsLOJt8B0vTzOW5GIO/75/o/y7PDEEIGWJ14m4NYIHSz308EVEeLqGpL0Em8w6Eb5pPQFx+AUWgrfy7PViaEV6IpvQDgpYifhPbE9Yqx2WNJNvM5ENysk2sZE7YVUYa8COyIy3BLeB9CADycjZmB+288Ub6j3wAbnS3qJ1xg0R6Gf7aU+tAezgk4FtiYyVGDW2grmM2uSFQFMeLWQCm6RYWRiLU+8QoBK/h0lghOkgj0y/cnEDlOB4m4AT8skKccyFvmZYK40VwOwsuIlYtwmm5cZO0vMTrG1uFuWlYkffhvTkZhHMXpEJlE5lrDQTwX3S3NVANsTLwK4XTYfAbsOEjuDj2HI5okSP8JG2lrAxA9GSVIZQ0QL8qnCQ7Lc4HjbFS+AcId0HsbuOLPT01rcKc0qACO+ytlZ8RQY98nmrXaSKWoeOyueBWPAGZSI7J4YsZNLjd5rZ813YdsTzwG4M+IEDoepSrQ9Ed5/w/uwXGN0xlBycpner+VAveiaAsP0yjfyKmfqqg3ZdsVCEO5VmNJeipWcfEvvVwqsFhJJYNiD6iY2aiXanngSgPwDiPAdlUpOPtP7pZYJRTiywDC/7VnvAHydbF+1JNpZ63EwPyCbF8AP6Cs5/qzezxXYuiBSAssSXbEYhDbZ3qtJTLpqT3sQfgLHHD/tfyY7lnrGSws8VIlq3x4GS0x61nwGq2x5fkEp5vit/pZ6ylDJpSSw/8Gi9t21/8GSdK3HDv1gK9kIvzGTU0gXPpYkGxKuLLC/EpXOnISVqPSmA/zBJXIKrYVNDbGhkFRLIBhkZ8VmADMU+pZDCH/1V94GObCx0XoCw7FtgW3nrI0An9G4odJ+LiGsvLDix1TTFwjgyDWY0jtBrAPj9HrPjoEDIGorpArhKasx1+oiMJxV0k2ewOhbC8KpdZxld4nRFmQCt44565qqbgIPPZmtqcTsIfyfmX7LxQhtuVSwRj9V4zLUVWA4zEQ2cVq8RB0gnKgxbJ/iaMtfFHykkWNU0LoLLC/njonTOBYLJ3+cwiwCIrRV+3ekQr6GIg0RGI7Ydu0ZiJVWgnGUxAx6+ytvuQTzv4Y2TGD5nuhaLUQcntezI8yyD8yOnykujRA7ZkIaKrC8nD1xCQPhub34CLNmgB0/XRzxRMSYsVYxkIYLLC/njkQbYjQfwClDJDCHPwg842eKi8eioFpjGhWB4SAmr5h8zEGrGH5lm1be5jA6QdjudwVz0I6eWgMdq9dHTeBYFaA7LiNQ06ARaARqGtDETQUagZoGNHFTgUagpgFN3FSgEahpQBM3FWgEahrQxE0FGoGaBjTxfwEuZSVvUpE5IwAAAABJRU5ErkJggg==" />


经过Base64 编码后的文件体积一般比源文件大 30% 左右。
*请上传小于300KB的.jpg/.jpeg/.gif/.bmp/.png/.ico格式图片,不建议将大图转换。

后一页:没有了
相关阅读
( 2013/12/31 19:47:01 )ASP链接地址栏参数的加密
共有0条关于《css背景使用base64编码或者将base64编码放在img图片标签中》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
解决手机端微信浏览器中视频自动播放和默认全屏问题
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
更多>>最新添加文章
asp利用hasOwnProperty验证某个json中的某个标签是否存在
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
fiddler抓包在内容的SyntaxView窗口里面是乱码
服务器iis配置.mp4视频格式文件播放(网页播放mp4有声音但没有图像画面)
好用的免费桌面gif录制作屏幕软件
jquery实现单选按钮radio选中和取消 使用prop()代替attr()
实现iis6与iis7环境下支持mp4视频随意拖动、预览播放、边下载边播放
更多>>随机抽取信息
IE6不支持png24的解决办法(png24做为css的背景)
双击文字后实现编辑文本功能
asp Microsoft.XMLHTTP生成静态页延迟解决方案
CSS教程:弄懂闭合浮动元素
Javascript JS 限制复选框的选择个数
cookies
这个超级强的div+css图片大小自适应
利用position属性把层永远定位于页面中部