Tengo esta animación en el cuerpo que hace que el cuerpo se encoja a un tamaño mucho más pequeño que el área de la ventana gráfica. Pero cuando ocurre la animación del cuerpo, el resto del color de fondo de la ventana gráfica aparece en blanco. No puedo controlar ese color y ¿cuál es esa área? ¿Es root o html? Intenté establecer una propiedad de color de fondo en root y html, pero hace que la animación del cuerpo esté oculta/falte. Tengo un fondo de cuerpo oscuro/negro establecido después de la animación. Pero durante la animación del cuerpo, el resto del fondo aparece en blanco y necesito cambiarlo a negro.
CSS
body { background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed; background-repeat: no-repeat; background-position: top center; background-size: 85% 2%; } @media only screen and (max-width: 615px) and (orientation: portrait) { body { background-size: 85% 2%; animation: mooveme 0.4s; } } @keyframes mooveme { from { background-size: 85% 2%; } to { background-size: 45% 2%; } }JAVASCRIPT
setInterval(function() { document.body.style.background = "rgba(0,0,0,1)"; }, 400); Agregar html { background-color: rgba(0,0,0,1); } cambia los primeros 400 ms a un fondo negro pero la animación del cuerpo no funciona. Solo forzar Chrome al modo oscuro en (chrome://flags/) puede hacer que el resto del fondo sea negro con la animación corporal deseada. ¿Qué está pasando? ¿Cómo puedo arreglar ambos?
No está cambiando el tamaño del cuerpo en absoluto, solo el tamaño de parte de su fondo general.
Entonces, para tener el resto de la pantalla en negro, simplemente puede establecer su color de fondo, no es necesario invocar a JS para hacerlo al final de la animación, lo necesita en todo momento.
Tenga en cuenta también que IOS tiene un problema con el archivo adjunto fijo en algunas versiones, por lo que se ha eliminado.
body { background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white); background-repeat: no-repeat; background-position: top center; background-size: 85% 2%; width: 100vw; height: 100vh; background-color:black; } @media only screen and (max-width: 615px) and (orientation: portrait) { body { background-size: 85% 2%; animation: mooveme 0.4s; } } @keyframes mooveme { from { background-size: 85% 2%; } to { background-size: 45% 2%; } }use la palabra clave !importante para cambiar el fondo o establezca el color en la animación también
body { background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white); background-repeat: no-repeat; background-position: top center; background-size: 85% 2%; width: 100vw; height: 100vh; background-color:black !important; } @media only screen and (max-width: 615px) and (orientation: portrait) { body { background-size: 85% 2%; animation: mooveme 0.4s; } } @keyframes mooveme { from { background-size: 85% 2%; } to { background-size: 45% 2%; } } body { background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white); background-repeat: no-repeat; background-position: top center; background-size: 85% 2%; width: 100vw; height: 100vh; background-color:black !important; } @media only screen and (max-width: 615px) and (orientation: portrait) { body { background-size: 85% 2%; animation: mooveme 0.4s; } } @keyframes mooveme { from { background-size: 85% 2%; backgroun-color: black; } to { background-size: 45% 2%; backgroun-color: black; } }Para configurar el fondo del elemento raíz, simplemente confirme que usó el pseudoselector : ?
/* Selects the root element of the document: <html> in the case of HTML */ :root { background: yellow; } Dicho esto, parece que hay algunas anomalías que surgen si configura el fondo de los elementos body y html, donde si configura el fondo <html> , entonces el elemento <body> se comporta como un elemento <div> normal, es decir, su altura estará determinada por su contenido.
https://css-tricks.com/solo-una-de-esas-cosas-extrañas-sobre-css-background-on-body/