更改 body 不透明度关键帧

Question

我想使用关键帧更改 body 不透明度，也可以使用 javascript 因为我的最终目标是获取一堆图片并将它们制作成幻灯片类型的背景， 不使用 div 因为这会弄乱我在网站上的其他内容，但是，显然如果唯一的方法是使用a div 那么我想我必须:)

颜色更改有效，但不透明度无效。

想知道是否有人可以提供帮助，这是我的 css。

body {
  animation: back 5s infinite;
  
}

@keyframes back {
  0% {
    background: red;
    opacity: 1;
  }

  50% {
    background: yellow;
    opacity: 0;
  }

  100% {
    background: red;
    opacity: 1;
  }
}

Answer 1

这是因为 the background propagation 在 html 元素上制作了背景，而不再是 body 元素。

为避免这种情况，请将白色背景添加到 html（或任何非透明背景）并确保正文至少为全高：

body {
  animation: back 5s infinite;
  margin:0;
  min-height:100vh;

}

@keyframes back {
  0% {
    background: red;
    opacity: 1;
  }

  50% {
    background: yellow;
    opacity: 0;
  }

  100% {
    background: red;
    opacity: 1;
  }
}

html {
  background:#fff;
}

更改 body 不透明度关键帧

Change body opacity keyframe

html

javascript

css

keyframe