Comment puis-je étendre un arrière-plan dégradé CSS pour l'adapter à toute la fenêtre du navigateur au lieu de le répéter ?

Arrière-plans dégradés sur un élément corporel : répéter ou étirer ?

Dans la conception Web, l'utilisation de dégradés CSS pour les arrière-plans peut améliorer l'esthétique. Cependant, lors de l'application d'un dégradé à l'élément body, un problème courant se pose : le dégradé cesse de s'étirer, mais se répète.

La question :

Supposons que le dégradé d'un document le contenu du corps mesure 300 px de hauteur. La définition d'un arrière-plan dégradé à l'aide de -webkit-gradient ou -moz-linear-gradient donne un dégradé de seulement 300 pixels de haut et se répète à l'infini pour remplir l'espace restant de la fenêtre. Existe-t-il une solution pour que le dégradé s'étire pour s'adapter à la fenêtre plutôt que de le répéter ?

La réponse :

Pour obtenir un dégradé qui s'étire pour remplir toute la fenêtre, appliquez le CSS suivant :

html {
    height: 100%;
}

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

• La hauteur de l'élément html est définie sur 100 % pour garantir qu'il s'étend sur toute la fenêtre height.
• La hauteur de l'élément body est également définie sur 100 %, ce qui lui permet de remplir la hauteur disponible dans l'élément html.
• margin : 0 est ajouté pour supprimer tout espacement indésirable autour du corps. .
• background-repeat : no-repeat empêche le dégradé de se répéter lui-même.
• background-attachment:fixed maintient le dégradé en place pendant le défilement de la fenêtre.

En implémentant ces règles CSS, l'arrière-plan dégradé sur l'élément body s'étirera pour remplir le toute la hauteur de la fenêtre, offrant un effet visuellement homogène et immersif.

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!