css3背景 slider ，白页flash

Question

我目前正在使用来自 codrops 的 css3 背景 slider :

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

这是我把它放在的网站:

http://www.josturdycelebrant.com

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

如有任何帮助，我们将不胜感激。

Answer 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; 

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