Estoy tratando de cargar una página web simple que tiene una imagen que cubre todo el fondo de la página. Sin embargo, cuando la página se carga por primera vez, hay un parpadeo blanco notable durante una fracción de segundo mientras se carga la imagen. Ya he intentado sugerencias como pero sin ningún efecto. Aquí está mi código a continuación:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <div class="bg"></div> </body> </html>¿Alguien tiene una solución para eliminar el efecto de parpadeo?
Puede configurar .bg con opacidad 0 , luego con jQuery una vez que la página haya terminado de cargarse, agregue una clase configurada con opacidad 1 .
Si desea un efecto de "desvanecimiento", simplemente agregue una transición.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; transition: opacity 1.3s ease-out; opacity: 0; } .bg.visible{ opacity: 1; } </style> </head> <body> <div class="bg"></div> </body> <script type="text/javascript"> $(document).ready(function(){ $(window).on("load",function(){ $('.bg').addClass('visible'); }); }); </script> </html>Quizás no sea la mejor solución, pero a mí me funciona.
Si desea una imagen que cubra todo el fondo de la página, debe configurarla directamente para el elemento <body> de esta manera:
body { background-image: url(your_url/your_image.png); background-position: center; // to center the image background-repeat: no-repeat; // to not repeat the image background-size: cover; // to cover the element background-color: #000; // fallback if the image is not available }o con la abreviatura CSS más compacta:
background: #000 url(your_url/your_image.png) no-repeat center; background-size: cover;