Why the taeget is different?

Question

I am adding filter:hue-rotate(); inside keyframes, keyframes is targetting the background color of the body. But why the background color that change is the box?
https://code.sololearn.com/WXron5e5xQd5/?ref=app

Answer 1

The problem: For some strange reasons that I do not know of, some properties and stuff will not apply to the body. So the filter will not apply to the body background, but to the body content (since the content is INSIDE the body element).
How to fix: I would add another element where id="background", and reference that in your CSS to have that element with a width of 100vw and a height of 100vh (to fill the whole screen) and the animation (and a background-color, or course). But make sure you give that element a low z-index and the other elements a higher z-index, to that the actual content is on top of the background.

Answer 2

Jingga Sona 🐺 best SoloLearn quote of 2018: ‘Please check your internet connection and try again’

Answer 3

Rowsej lol😂

Answer 4

Thanks Rowsej,
Oh and if you wondering why i am not replying you, i alredy did, but SIGNAL😅😅😭😭