更改身体不透明度关键帧 [英] Change body opacity keyframe

问题描述

我想使用关键帧来更改身体的不透明度，还希望使用javascript，因为我的最终目标是获取一堆图片，并在后台将其制成幻灯片类型的内容， 不使用div ，因为这会弄乱我在网站上拥有的其他内容，但是，显然，如果唯一的方法是使用div，那么我想我必须:)

I want to change the body opacity using keyframes, also open to use javascript as my end goal is getting a bunch of pictures and making them into a slideshow type thing in the background, not using a div as that messes up the other content I have on the website,however, obviously if the only way is using a div then I guess I'll have to :)

颜色更改有效但不透明.

Th color changing works but not the opacity.

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

Was wondering if someone could help, here is my css.

body {
  animation: back 5s infinite;
  
}

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

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

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

 

推荐答案

这是因为

This is because of the background propagation making the background on the html element and no more the body element.

为避免这种情况，请在html中添加白色背景(或任何非透明背景)，并确保正文至少处于完整高度:

To avoid this add a white background to html (or any non transparent background) and make sure the body is at least full height:

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;
}

这篇关于更改身体不透明度关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！