如何为元素中的 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

您无法设置动画 background-images。您可以更改它，但不会有任何平滑过渡：

#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 背景，并设置它们的不透明度动画。如果您需要有关此方法的更多信息，请通过评论告诉我，我将编辑 post 并展示它是如何完成的。

Answer 2

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

为了实现这一点，此代码段从元素本身移除了背景，而不是将它们放在两个伪元素上。 before 伪元素将第一个图像作为背景，after 伪元素将第二个图像作为背景。

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

但是请注意，该代码段中添加了一些技巧。由于 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>

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

How to set transition for 2 backgrounds in an element?

html

css

css-transitions

background-image