页面加载闪白

今天遇到一个问题，写了一个使用深色背景图的网页，发现访问/刷新时，会出现短暂的闪白现象。

之前使用浅色背景时没有发现过这个问题，搜索半天也没有找到特别直白有效的回答。

找到的几个答案，有说预加载的，有说降低背景图片的分辨率的，使用js加载背景的。试过之后感觉效果都不理想。

后来又重新观察了一下闪白的情况，发现每次都是页面的后半段闪烁，才发现问题的关键不在代码，而在图片

图片加载的两种方式：

Baseline JPEG(基准式)

Progressive JPEG(渐进式)

基准型加载

这种类型的文件存储方式是按从上到下的扫描方式，打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。

放到浏览器里就是这样我遇到的这种情况了，虽然图片很快就加载完成了，但是有一点小小的延迟，就会导致闪白。

渐进式加载

这种文件包含多次扫描，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。

打开图片的效果是，先会加载一张比较模糊的图片大图，随着不断的加载，图片会越来越清晰。

优化方案

将背景图片的加载格式转换成渐进式加载即可。

PS转换

将图片放入ps中重新到出，到处是选择渐进式加载格式即可。

代码转换

就该个格式用ps还是有点麻烦，用代码直接修改还是更适合我们。

下面给出我用Python的转换代码。

from PIL import Image,ImageFile

img=Image.open(‘./bg.png‘)

destination = "./bg.jpeg"

try:

img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

except :

ImageFile.MAXBLOCK = img.size[0] * img.size[1]

img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

原文：https://www.cnblogs.com/aduner/p/14370246.html

在CSS布局时，可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺(从上到下居中平铺)，此时整个网页无论内容是否占满一屏幕，css背景都会从上到下铺(纵向)满整个屏幕。

但有时我们不需要这样的一个效果，需要内容占用多高，body背景就纵向从上到下铺满多少高度。

很明显这样就达不到我们想要的效果。

解决方法：对html再设置个背景(无论图片还是纯色，推荐设置纯颜色的背景颜色)接下来DIVCSS5通过实例为大家介绍此技巧，首先DIVCSS5分为两个案例，一个是直接对body设置背景图片从上到下平铺，我们会观察到无论网页内容是否占满一屏幕，背景都会从上到下满铺。

一、未解决背景纵向平铺CSS DIV案例 - TOP1、DIV CSS案例描述首先对body设置一个背景图片(bg.gif)从上到下平铺，设置一个div盒子宽度为274px,高度为200px;div背景颜色为蓝色。

2、案例HTML源代码：!DOCTYPEhtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleCSS案例在线演示DIVCSS5/titlelinkhref=images/style.cssrel=stylesheettype=text/css/!--www.divcss5.com--/headbodydivclass=divboxDIVCSS5实例内容/div/body/html3、案例CSS代码：@charsetutf-8;/*DIVCSS5-CSS初始化模板-www.divcss5.com*/body,div{margin:0;padding:0;font-style:normal;font:12px/22px5B8B4F53,Arial,Helvetica,sans-serif}/*5B8B4F53代表宋体，更多中文字体转Unicodehttp://www.divcss5.com/jiqiao/j325.shtml*/ol,ul,li{list-style:none}body{color:#FFF;background:#E2E2E2url(bg.gif)repeat-ycenter0;text-align:center}.divbox{margin:0auto;width:274px;height:200px;background:#00F}4、实例截图对body设置纵向平铺背景图片显示案例截图从以上图上看到对body设置背景图片从上到下纵向平铺时，无论内容是否占满1屏幕，其背景都会从上到下都会平铺满整个屏幕，此时就不那么好看了，接下来第二个案例在此基础上进行解决背景随内容占用多个显示多个平铺图片背景。

5、在线演示：查看案例二、解决内容多高body设置背景图片平铺显示多高 - TOP1、解决说明我们只需要在CSS代码中对html加一个背景色即可，当然这个背景设置需要根据布局实际情况而设置，这里因为背景颜色为#E2E2E2，此时我们就只需要对html设置一个CSS背景色为#E2E2E2即可解决实现完美背景图片纵向从上到下平铺问题。

2、CSS代码：@charsetutf-8;/*DIVCSS5-CSS初始化模板-www.divcss5.com*/body,div{margin:0;padding:0;font-style:normal;font:12px/22px5B8B4F53,Arial,Helvetica,sans-serif}/*5B8B4F53代表宋体，更多中文字体转Unicodehttp://www.divcss5.com/jiqiao/j325.shtml*/ol,ul,li{list-style:none}html{background:#E2E2E2}/*CSS注释说明：对html设置背景颜色*/body{color:#FFF;background:#E2E2E2url(bg.gif)repeat-ycenter0;text-align:center}.divbox{margin:0auto;width:274px;height:200px;background:#00F}3、案例截图解决body背景图片纵向平铺内容占多高背景图片显示多高

版权声明：本文由 狂文君 整理编辑。

原标题：body背景图片平铺,设置body背景图片

1.这个效果是看到京东商城上的一个下效果，原本的思路是

用js控制一个图片在某张需要闪光的图片上重复出现，但是

网上找了一些资料，竟然是用css写的，真是太帅了！！！

2.原理：在需要闪光的图片前添加before 属性；内容为空；

宽为200px,高为100%，left：-150px,overflow:hiddden;

background属性设置为渐变；颜色看自己需要；transform-skewX(-25deg)

然后为before的content设置过渡动画：{left：150%,transiton：150px 1s ease 0s}

就可以了；

3：参考代码如下：

img{width:800px;height:450px;margin:0 auto;}

.img { display:block; position: relative; width:800px; height:450px; margin:0 auto;}

.img:before{ content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;

background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));

background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

-webkit-transform: skewX(-25deg);

-moz-transform: skewX(-25deg)

}

.img:hover:before { left: 150%; transition: left 1s ease 0s; }

CSS 实现图片灰度效果 兼容各种浏览器

CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

CSS 实现图片灰度效果

非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

iOS 加载本地 HTML 文件 CSS 样式图片无效果

在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

HTML和CSS实现图片翻转效果

实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...

(JS+CSS)实现图片放大效果

代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单