如何为元素中的 2 个背景设置过渡？

Question

在这段代码中：

    #p1 {
        background-image: url(backimgs/first/1.jpg), url(backimgs/first/2.jpg);
        background-color: #05080d;
        background-position: left top, left bottom;
        background-size: 100% 35%, 100% 65%;
    }

我希望页面出现时，首先显示backimgs/first/1.jpg，然后在 1 秒后显示backimgs/first/2.jpg。我该怎么做？

Answer 1

您不能为背景图像设置动画。您可以更改它，但不会有任何平滑过渡：

#p1 {
  background-image: url(backimgs/first/1.jpg), url(backimgs/first/2.jpg);
  background-color: #05080d;
  background-position: left top, left bottom;
  background-size: 100% 35%, 100% 65%;
  animation: change-bg;
  animation-duration: 1s;
}

@keyframes change-bg {
  0% {
    background-image: url(backimgs/first/1.jpg), url(backimgs/first/2.jpg);
    background-size: 100% 35%, 100% 65%;
  }
  100% {
    background-image: url(backimgs/first/2.jpg), url(backimgs/first/1.jpg);
    background-size: 100% 65%, 100% 35%;
  }
}

如果您想要平滑过渡 - 您可以使用带有背景的 ::before 和 ::after 并为它们的不透明度设置动画。如果您需要有关此方法的更多信息，请在评论中告诉我，我将编辑帖子并展示它是如何完成的。

Answer 2

您在标题中提到了“过渡”，因此您需要分别控制背景的两个部分。

为了实现这一点，这个 sn-p 从元素本身中删除背景，而不是将它们放在两个伪元素上。以第一张图片为背景的 before 伪元素和以第二张图片为背景的 after 伪元素。

以这种方式分离组件意味着我们可以为不透明度设置动画，第一个伪元素在第一秒内从不透明度 0 变为不透明度 1。

但请注意，已在 ths sn-p 中添加了一些小技巧。由于 before 伪元素上的动画是在加载时发生的，因此需要有某种方法在动画开始之前等待背景图像加载，否则就有可能在动画开始之前完成，甚至完成。图片实际可用。

我不知道您是如何测试负载是否完成的更广泛的背景，所以这里只是为了演示目的而延迟。您需要决定如何避免这种初始负载情况。

* {
  margin: 0;
  padding: 0;
}

#p1 {
  /* added for this demo */
  display: inline-block;
  width: 100vw;
  height: 100vh;
  position: relative;
}

#p1::before,
#p1::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  left: 0;
  display: inline-block;
  background-color: #05080d;
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  animation: fadein 1s linear;
  animation-fill-mode: forwards;
  opacity: 0;
}

#p1::before {
  top: 0;
  height: 35%;
  background-image: url(https://picsum.photos/id/1018/1024/768);
  animation-delay: 1s;
  /* a hack to ensure it is loaded before start the animation */
}

#p1::after {
  bottom: 0;
  height: 65%;
  background-image: url(https://picsum.photos/id/1015/1024/768);
  animation-delay: 2s;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div id="p1"></div>