css 切换背景图闪烁

CSS 可以让网页中的背景图进行切换，但是在切换的时候有时候会出现背景图闪烁的现象，这是为什么呢？

background-image:url(bg1.png);
     //初始背景图animation:fade 5s infinite;
@keyframes fade {
    0% {
    opacity:1;
}
    50% {
    opacity:0;
}
    100% {
    opacity:1;
}
}
    

以上是 CSS 设置切换背景图的代码，其中使用了 animation 属性来让背景图进行淡入淡出的效果。但是在实际中会发现，切换背景图的时候会出现闪烁现象。

这是因为在加载下一张背景图的时候，浏览器还没有完全加载完成，会在背景图出现的瞬间造成背景图的闪烁。

为了避免闪烁现象，可以采取以下措施：

background-image:url(bg1.png);
     //初始背景图animation:fade 5s infinite;
    opacity:1;
 //设置默认透明度为1@keyframes fade {
    0% {
    opacity:1;
}
    50% {
    opacity:0;
}
    100% {
    opacity:1;
}
}
    

修改代码如上，在设置初始背景图的时候，同时设置其透明度为1，这样在切换背景图的时候，由于背景图本身就是透明的，所以就不会出现闪烁现象了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！