css3背景滑块，白页闪烁答案

【问题标题】：css3 background slider, white page flashcss3背景滑块，白页闪烁
【发布时间】：2012-11-24 04:14:30
【问题描述】：

我目前正在使用 codrops 的 css3 背景滑块：

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

这是我放的网站：

http://www.josturdycelebrant.com

问题是，客户端不希望页面在第一个滑块图像加载之前闪烁白色或任何其他颜色。他们只是希望图像在那里。除了将背景设置为滑块中的第一张图片之外，我到处寻找答案。

任何帮助将不胜感激。

【问题讨论】：

标签： css background slider

【解决方案1】：

你确定这是个好主意吗？

淡入效果经常被使用，不仅因为它在渲染中的柔和和“自然”的感觉，还因为它允许浏览器有一定的时间来完全加载图像，否则用户会体验到加载图像的丑陋“级联”效果。我们可以很肯定地说，用于背景的高分辨率图像就是这种情况，如您的示例所示。

无论如何，如果您（或您的客户）仍然想尝试一下，这里有一个方法来完成它。

您只需要声明为第一张图片优化的自定义动画。比如：

@-webkit-keyframes firstImageAnimation { 
     0% { opacity: 1; }
    17% { opacity: 1; }
    25% { opacity: 0; }
   100% { opacity: 0; } }  /* complete with all other vendor prefixes */

然后把它赋值给你想先出现的.jpg：

.cb-slideshow li:nth-child(1) span { 
   background-image:url(path-to-first-image);
   -webkit-animation: firstImageAnimation 36s linear infinite 0s;
      -moz-animation: firstImageAnimation 36s linear infinite 0s;
       -ms-animation: firstImageAnimation 36s linear infinite 0s;
        -o-animation: firstImageAnimation 36s linear infinite 0s;
           animation: firstImageAnimation 36s linear infinite 0s; 

}

（这将覆盖原始动画，仍然分配给其他所有背景图像）。

这样第一张图片会在页面加载后立即弹出。不幸的是，过了一会儿你会注意到这会破坏幻灯片，因为在最后一张图片消失后，第一张图片会突然出现。

一个简单的解决方法是在幻灯片中分配与 first 和 last 相同的图像，后者默认返回与除第一个之外的任何其他图像相同的动画. 所以在这种情况下，它会是这样的：

.cb-slideshow li:nth-child(6) span { 
    background-image: url(path-to-first-image);
    -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
         -o-animation-delay: 30s;
            animation-delay: 30s;

}

这将转换为从集合中的最后一张图片到第一张图片的无缝过渡。

【讨论】：