css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片

之前写过一篇：CSS中background属性总结整理了background 的常用属性。

日常项目中经常会用到全屏的图片， .png 和 .jpg 的图片都太大，加载缓慢。

我们可以使用webP格式的图片或者分辨率较低的压缩图，再叠加一层清晰的 png 图片，实现快速显示的效果。

叠加 png 图片的目的是防止某些浏览器不支持 webP 格式。

CSS代码：

body{

background-image: url("img/beijing.webp"),url("img/beijing.png");

}

两张图会进行叠加，先显示 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 属性参考上面的链接。

css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片相关推荐

glide 加载webp_如何使您的网站通过WebP图像快速加载闪电
glide 加载webp by Carmen Chung 通过钟Car 如何使您的网站通过WebP图像快速加载闪电 (How to make your website load lightning f ...
JavaScript 的性能优化：加载和执行
概览无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
如何优化网站加载时间
一.背景我们要监测网站的加载情况,可以使用 window.performance 来简单的检测. window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持 ...
前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Dns-prefetch DNS 预解析优化页面加载速度
Dns-prefetch DNS 预解析优化页面加载速度浏览器访问一个链接时并不是直接将请求到网页对应的服务器上,而是先要做域名解析--将域名解析到网页对应的服务器 ip 地址,然后浏览器才能和服务 ...
html5 页面加载缓慢,html5体验优化页面加载的14条建议
html5体验优化页面加载的14条建议 1. fake 页 - 首屏加速目标:首屏 3s 以内因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 ...
java做类似于qq空间动态加载_实现类似微博、QQ空间等的动态加载
微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上本文利用该原理实现了动态加载,但不是检测当前滚 ...
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】
Threejs系列--14游戏开发--沙漠赛车游戏[纹理贴图之loading加载] 序言目录结构代码一览 world/index.js代码 Application.js代码代码解读运行结果序 ...
cocos2d-x 图片纹理优化资源加载方案
原文地址:http://blog.sina.com.cn/s/blog_64d591e80101me1y.html 文章主要解决了我一直以来疑惑的几个问题 1.到底用不用2的N次幂的图片 2.为什么加 ...

css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片

css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片相关推荐

最新文章

热门文章