Question

我希望使用HTML和CSS 获得多个背景图像（因为这是迄今为止我学过的唯一语言）。

我获得背景封面的最佳结果来自id="full-bg"。现在如何在旋转的同时将其制作成多张背景封面照片（每次更改为5秒）。

Answer 1

试试这个JSfiddle

此代码仅使用css并在您添加的背景中旋转。

body{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: fixed;
  animation-duration: 5s;
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;

}

@keyframes fade-bg {
    0% {
        background-image: url('http://i.imgur.com/sRnvs0K.jpg');
    }
    50% {
        background-image: url('http://i.imgur.com/sRnvs0K.jpg');
    }
    51% {
        background-image: url('http://i.imgur.com/wL4RT1w.jpg');
    }
    100% {
        background-image: url('http://i.imgur.com/wL4RT1w.jpg');
    }
}

我希望这有帮助！

Answer 2

这是一个跨浏览器的解决方案：

body{
        -webkit-animation: change 5s linear infinite;   
        -moz-animation: change 5s linear infinite;  
        -ms-animation: change 5s linear infinite;   
        -o-animation: change 5s linear infinite;    
        animation: change 5s linear infinite;
    }


    @-webkit-keyframes change
    {
        0% { background-image:url('your_first_img.jpeg'); }
        100%   {background-image:url('your_second_img.jpeg'); }
    }

    @-moz-keyframes change
    {
        0% { background-image:url('your_first_img.jpeg'); }
        100%   {background-image:url('your_second_img.jpeg'); }
    }

    @-ms-keyframes change
    {
        0% { background-image:url('your_first_img.jpeg'); }
        100%   {background-image:url('your_second_img.jpeg'); }
    }

    @-o-keyframes change
    {
        0% { background-image:url('your_first_img.jpeg'); }
        100%   {background-image:url('your_second_img.jpeg'); }
    }

    @keyframes change
    {
        0% { background-image:url('your_first_img.jpeg'); }
        100%   {background-image:url('your_second_img.jpeg'); }
    }

如何使用css /全屏幻灯片显示多个旋转背景幕

2 个答案: