CSS实现background背景图优化，快速加载图片
之前写过一篇：CSS中background属性总结 整理了 background 的常用属性。
日常项目中经常会用到全屏的图片， .png 和 .jpg 的图片都太大，加载缓慢。
我们可以使用webP格式的图片或者分辨率较低的压缩图，再叠加一层清晰的 png 图片，实现快速显示的效果。
叠加 png 图片的目的是防止某些浏览器不支持 webP 格式。
CSS代码：
<style>
body{
background-image: url("img/beijing.webp"),url("img/beijing.png");
}
</style>两张图会进行叠加，先显示 webP 格式，再显示 png 格式，因为 webP 图片会比 png 小很多，可以实现快速显示的效果。
也可以多加一些属性：
background-image:url("1.jpg"),url("2.jpg");
background-repeat: no-repeat, no-repeat;
background-position:bottom right,top left;
background-size:0 200px,0 0;综合写法：
background: url("img/beijing.webp") no-repeat center,url("img/beijing.png") no-repeat center;具体的 background 属性参考上面的链接。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读