Comment faire en sorte qu'un arrière-plan dégradé CSS remplisse toute la hauteur de la fenêtre du navigateur ?

Gestion des arrière-plans dégradés pour remplir la hauteur de la fenêtre

Lors de l'application d'un arrière-plan dégradé CSS3 au élément, il se répète par défaut au lieu de s'étirer pour remplir toute la fenêtre du navigateur. Bien qu'il ait été observé dans les navigateurs WebKit et Gecko, ce comportement est intentionnel.

Pour remédier à cela, le dégradé doit être configuré :

1. Définir la hauteur de l'élément HTML :

   html {
       height: 100%;
   }

   Copier après la connexion

2. Gérer la body Element :

   body {
       height: 100%;               // Match the height of the HTML element
       margin: 0;                  // Remove any margins to ensure full window coverage
       background-repeat: no-repeat; // Prevent gradient repetition
       background-attachment: fixed; // Keep the gradient in position as the page scrolls (optional)
   }

   Copier après la connexion

En appliquant ces styles CSS, l'arrière-plan dégradé s'étirera désormais pour remplir la fenêtre du navigateur, quelle que soit la hauteur du contenu dans le < corps>.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!