Comment utiliser efficacement les arrière-plans HTML `` et `` ?

Comment utiliser les arrière-plans pour et/ou

Ce guide aborde les différents scénarios d'application d'arrière-plans à des documents HTML, clarifiant pourquoi des comportements spécifiques se produisent et fournissant des solutions pour obtenir les effets d'arrière-plan souhaités.

Application d'arrière-plans à et

Il est essentiel de noter qu'il existe une différence lors de la définition des propriétés d'arrière-plan sur le et éléments en mode standards.

• Lors de l'application d'un arrière-plan à  : L'arrière-plan occupera toute la partie visible de la page, quelle que soit la taille réelle du < ;corps>
• Lors de l'application d'un arrière-plan à  : L'arrière-plan ne couvrira que la zone occupée par l'élément , qui est souvent plus grand que la zone visible en raison des marges par défaut appliquées à l'élément élément. Dans de tels cas, le champ la couleur d'arrière-plan de l'élément "saignera" à travers le

Superposition d'arrière-plans

Pour obtenir des effets tels qu'une couleur d'arrière-plan avec une superposition d'image semi-transparente, il n'est pas nécessaire d'utiliser des éléments et éléments. Utilisez plutôt les propriétés background-color et background-image conjointement :

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

Combinaison de plusieurs images d'arrière-plan

Pour combiner plusieurs images d'arrière-plan, vous pouvez utiliser les techniques CSS2 ou tirer parti de CSS3. améliorations :

• CSS2 : Définissez différentes images d'arrière-plan sur le et éléments. Assurez-vous que le code L'élément a une hauteur définie pour s'adapter à l'arrière-plan du  :

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

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

• CSS3 : Utiliser la syntaxe d'arrière-plan multicouche :

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

Fournir des solutions de repli

Si votre objectif est de soutenir les personnes âgées navigateurs, utilisez la méthode CSS2 pour appliquer plusieurs arrière-plans car elle est prise en charge par IE7. Gardez à l'esprit que la syntaxe d'arrière-plan multicouche CSS3 peut donner lieu à ce que seul le calque le plus bas ait une couleur d'arrière-plan.

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!