Arrière-plans HTML ou corps en CSS : où dois-je appliquer mon arrière-plan plein écran ?

Contexte CSS sur vs  : une histoire de deux fenêtres

Lors de l'application d'un arrière-plan CSS à l'élément ou élément, une différence subtile mais significative apparaît. Un arrière-plan attribué à s'étend sur toute la page, quelle que soit la taille réelle du corps. À l'inverse, lorsqu'il est appliqué à la fois à et , l'arrière-plan de reste confiné aux dimensions de l'élément.

Raison de l'écart

Ce comportement découle du fait que n'occupe pas intrinsèquement toute la hauteur de la fenêtre en mode standard. Au lieu de cela, son arrière-plan hérite du élément s'il n'est pas spécifié, l'étendant sur toute la toile.

Superposition d'arrière-plans plein écran

Maintenant, si vous souhaitez combiner deux arrière-plans plein écran, qu'il s'agisse d'une couleur d'arrière-plan et d'une superposition d'image, ici Quelles sont vos options :

Combiner des arrière-plans sur un seul élément

Utiliser l'arrière-plan Raccourci :

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

Combinaison d'arrière-plans sur plusieurs éléments

Approche CSS2 :

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

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

CSS3 Approche :

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

Considérations

• En CSS3, seule la couche inférieure d'un arrière-plan multicouche peut avoir une couleur d'arrière-plan.
• Le le comportement noté s'applique même avec des arrière-plans multicouches.
• Pour une compatibilité avec les navigateurs plus anciens, envisagez d'utiliser le CSS2

N'oubliez pas que ce comportement provient de la pratique HTML antérieure consistant à définir l'attribut d'arrière-plan HTML sur , provoquant l'extension de l'arrière-plan sur la fenêtre d'affichage.

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!