javascript - 更改 body 不透明度关键帧

Question

我想使用关键帧更改主体不透明度，也可以使用 javascript，因为我的最终目标是获取一堆图片并将它们制作成背景中的幻灯片类型，不使用 div 因为这会弄乱我在网站上的其他内容，但是，显然如果唯一的方法是使用 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;
}