更改身体不透明度关键帧答案

【问题标题】：Change body opacity keyframe更改身体不透明度关键帧
【发布时间】：2020-07-08 19:14:33
【问题描述】：

我想使用关键帧改变身体不透明度，也可以使用 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;
  }
}

【问题讨论】：

对我来说很好用????‍♂️
@D.Pardal 只有颜色变化工作正常，而不是不透明度变化

标签： javascript html css keyframe

【解决方案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;
}

【讨论】：