Pourquoi mon dégradé CSS ne remplit-il pas toute la fenêtre du navigateur ?

Extension de dégradé incohérente dans les navigateurs Web : une explication complète

En établissant un arrière-plan dégradé CSS3 pour l'élément body, les utilisateurs peuvent rencontrer un problème intéressant comportement où le dégradé ne s'étire pas pour remplir toute la fenêtre mais répète plutôt son motif. Bien qu'il s'agisse d'une fonctionnalité prévue dans les navigateurs WebKit et Gecko, elle peut être déconcertante lorsque l'effet souhaité est un dégradé continu qui s'étend jusqu'au bas de la fenêtre.

Comprendre le problème

Le comportement par défaut des navigateurs est de répéter le motif de dégradé lorsque la taille de l'arrière-plan est plus petite que la fenêtre. Dans les cas où le contenu de l'élément body n'a qu'une hauteur de 300 px, le dégradé ne couvrira que cette hauteur, puis se répétera indéfiniment pour remplir l'espace restant dans la fenêtre.

Remplacement du comportement par défaut

Pour obtenir l'effet souhaité d'un dégradé pleine fenêtre, il est nécessaire de remplacer le comportement par défaut à l'aide de CSS. Cela peut être accompli en appliquant les styles suivants :

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

En définissant la hauteur des éléments html et body à 100 %, la fenêtre entière devient la zone du dégradé. La marge : 0 ; La règle garantit qu'il n'y a pas d'espace supplémentaire autour de l'élément body et background-repeat: no-repeat; empêche le dégradé de se répéter. De plus, background-attachement : corrigé ; corrige le dégradé en place afin qu'il ne défile pas avec le contenu de la 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!