Question

我想定期切换身体的背景图像，在每张图像之间交叉淡入淡出。

脚本解决方案如下所示：

的CSS：

body
{
    background-image: url("img/1.jpg");
    background-size: cover;
    background-position: center 0;
    background-attachment: fixed;
    transition: background-image 2s ease-in-out;
}

JS：

var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var current_image = 0;
$(function ()
{
    var body = $("body");
    setTimeout(next, 10000);

    function next()
    {
        current_image = (current_image + 1) % images.length;
        body.css("background-image", "url('img/" + images[current_image] + "')");

        setTimeout(next, 10000);
    }
});

但是有可能不使用脚本来淡化单个元素的背景（而不是改变一些img元素的不透明度）吗？

Answer 1

是的，你可以用css动画做到这一点。

像这样的东西。

＆＃13;

* { box-sizing: border-box}

.slides {
  width: 300px;
  height: 300px;
  background: tomato;
  animation: images 9s linear 0s infinite alternate;
}

@keyframes images {
  0% {
    background: url('https://fillmurray.com/300/300')
  }
  
  50% {
   background: url('http://www.placecage.com/c/300/300');
  }
  
  100% {
    background: url('https://stevensegallery.com/300/300')
  }
}

＆＃13;

<div class="slides"></div>

＆＃13;

Answer 2

即使有我接受的解决方案，我也会将此作为我自己问题的答案发布。这将添加的是如何在同一图像上停留一段时间而不立即转换到下一个图像。

body {
  background-size: cover;
  background-position: center 0;
  background-attachment: fixed;
  animation: images 100s linear 0s infinite;
}

@keyframes images {
  0% {
    background-image: url("img/1.jpg")
  }

  19% {
    background-image: url("img/1.jpg")
  }

  20% {
    background-image: url("img/2.jpg");
  }

  39% {
    background-image: url("img/2.jpg");
  }

  40% {
    background-image: url("img/3.jpg");
  }

  59% {
    background-image: url("img/3.jpg");
  }

  60% {
    background-image: url("img/4.jpg");
  }

  79% {
    background-image: url("img/4.jpg");
  }

  80% {
    background-image: url("img/5.jpg");
  }

  99% {
    background-image: url("img/5.jpg");
  }

  100% {
    background-image: url("img/1.jpg")
  }
}

我尝试将某些百分比分组，例如

0%, 19%, 100% {
  background-image: url("img/1.jpg");
}

但这导致＆＃34;闪烁＆＃34;图像之间。

交叉渐变没有脚本的单个元素的背景图像

2 个答案: