Pourquoi mon dégradé CSS3 ne s'étire-t-il pas pour remplir toute la fenêtre du navigateur ?

Élongation des dégradés en CSS3

Lors de la spécification d'un arrière-plan dégradé CSS3 pour l'élément élément, le dégradé ne s’étire pas pour remplir toute la fenêtre du navigateur. Au lieu de cela, il se répète jusqu'à ce que la zone de contenu soit remplie. Ce comportement peut être frustrant si vous souhaitez que le dégradé s'étende au-delà du contenu.

Solution

Pour étirer le dégradé pour remplir la fenêtre du navigateur, appliquez le CSS suivant :

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

Ces styles accomplissent les tâches suivantes :

• html { hauteur : 100 % ; } : définit la hauteur du champ élément à 100 %, garantissant que l'arrière-plan dégradé peut s'étendre au-delà de la zone visible.
• body { height: 100%; marge : 0 ; } : définit la hauteur du champ élément à 100 % et supprime toutes les marges pour éliminer tout chevauchement potentiel entre le dégradé et le contenu.
• background-repeat : no-repeat ; : empêche le dégradé de se répéter après avoir rempli la zone de contenu.
• background-attachment:fixed; : garantit que le dégradé reste fixe lorsque la barre de défilement se déplace, créant un effet de dégradé continu tout au long de la page. fenêtre.

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!