Изменить ключевой кадр непрозрачности тела

Question

Я хочу изменить непрозрачность тела, используя ключевые кадры, также открытые для использования javascript, так как моей конечной целью является получение нескольких картинок и превращение их в объект типа слайд-шоу на заднем плане, без использования div , поскольку это портит другой контент, который у меня есть на сайте, однако, очевидно, что если единственным способом является использование div, то я думаю, мне придется :)

Th цвет изменение работает, но не непрозрачность.

Интересно, если кто-то может помочь, вот мой 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

Это связано с тем, что фоновое распространение создает фон для элемента 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;
}