Comment les arrière-plans HTML et les éléments de corps interagissent-ils dans CSS et comment puis-je obtenir des arrière-plans en plein écran ?

Application d'arrière-plans à la page

Lorsque vous travaillez avec HTML et CSS, l'application d'arrière-plans à la page peut conduire à des résultats inattendus. Par défaut, les arrière-plans appliqués à l'élément body s'étendront pour couvrir la totalité de la page, quelle que soit la taille réelle du contenu du corps. Cependant, ce comportement change lorsqu'un arrière-plan est également appliqué à l'élément HTML.

Comportement attendu

En mode standard, les éléments HTML et body ne prennent pas initialement sur toute la hauteur de la fenêtre. Si aucun arrière-plan n'est appliqué à l'élément HTML, il héritera de l'arrière-plan du corps. Cependant, une fois qu'un arrière-plan est appliqué à l'élément HTML, ce mécanisme est rompu et les arrière-plans des deux éléments respecteront leurs zones définies.

Combiner des arrière-plans

Pour superposez deux arrière-plans plein écran (par exemple, une couleur d'arrière-plan et une image semi-transparente), vous pouvez utiliser soit le corps, soit l'élément HTML comme un seul conteneur.

Approche à élément unique :

Utilisez la propriété raccourcie background pour combiner background-color et background-image dans un seul élément :

body {
    background: #ddd url(background.png) center top no-repeat;
}

Approche à éléments multiples (CSS2) :

1. Définir une image d'arrière-plan sur le HTML élément.
2. Définissez une image d'arrière-plan transparente sur l'élément body avec la hauteur et la hauteur minimale souhaitées pour couvrir la fenêtre.

html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

Approche à éléments multiples (CSS3 ):

Déclarez plusieurs valeurs d'arrière-plan en tant que propriété unique au sein d'une seule element :

body {
    background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat;
}

Prise en charge du navigateur

Le mécanisme de propagation en arrière-plan s'applique à la fois aux approches à éléments uniques et multiples. Cependant, pour la compatibilité des navigateurs plus anciens, il est recommandé d'utiliser la méthode CSS2, qui est prise en charge par IE7.

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!