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 属性参考上面的链接。

未经允许不得转载:前端资源网 - w3h5 » CSS实现background背景图优化,快速加载图片

赞 (3)
分享到: +

评论 板凳

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  1. #1
    访客
    并没有什么卵用
    访客 4年前 (2020-06-19)回复 取消评论