问题
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.
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;
}
}
回答1:
This is because of the background propagation making the background on the html element and no more the body element.
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;
}
来源:https://stackoverflow.com/questions/60991262/change-body-opacity-keyframe