Pourquoi mon arrière-plan dégradé CSS3 ne s'étend-il pas sur toute la hauteur de la fenêtre ?

Problème d'étirement de l'arrière-plan dégradé dans CSS3

Problème :

Malgré la définition d'un arrière-plan dégradé pour le élément utilisant des dégradés CSS3, la hauteur du dégradé reste fixe à la hauteur du contenu, se répétant pour remplir l'espace restant de la fenêtre. Ce comportement se produit dans les navigateurs WebKit et Gecko.

Solution :

Pour forcer le dégradé à s'étirer jusqu'à la hauteur de la fenêtre, appliquez le CSS suivant :

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Explication :

• html et corps les hauteurs sont définies à 100 %, les obligeant à remplir toute la hauteur de la fenêtre.
• marge : 0 ; sur le corps supprime toutes les marges indésirables.
• background-repeat : no-repeat ; empêche le dégradé de se répéter.
• background-attachment : corrigé ; fixe la position du dégradé, garantissant qu'il reste stationnaire lorsque la fenêtre est redimensionnée.

Cette solution garantit que le dégradé s'étend verticalement pour remplir toute la hauteur de la fenêtre, sans répéter ni perturber la mise en page.

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!