Comment superposer efficacement des arrière-plans sur les éléments `` et `` HTML ?

Application d'arrière-plans à et

Dans les mises en page HTML, l'application d'un arrière-plan à la fois et les éléments peuvent donner des résultats inattendus. Cet article examine le comportement attendu et propose des solutions pour superposer plusieurs arrière-plans.

Propagation de l'arrière-plan en mode standards :

En mode standards, n'occupe pas automatiquement la hauteur de la fenêtre, même si cela peut sembler le cas avec un arrière-plan. Si aucun arrière-plan n'est défini pour , il hérite de l'arrière-plan de . Cependant, si vous spécifiez explicitement un arrière-plan pour , cet arrière-plan s'étend pour couvrir l'intégralité du canevas, y compris .

Superposition d'un seul élément :

Pour superposer deux images d'arrière-plan sur une couleur d'arrière-plan sur un seul élément, tel que ou , vous pouvez utiliser les propriétés background ou background-color. Par exemple :

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

Superposition d'images d'arrière-plan sur plusieurs éléments :

Pour combiner plusieurs images d'arrière-plan à l'aide de plusieurs éléments, vous pouvez appliquer différents paramètres d'arrière-plan à . Par exemple, définissez une image d'arrière-plan sur et un autre vers qui est destiné à le superposer. Assurez-vous que et sont correctement dimensionnés pour la hauteur plein écran.

Arrière-plans multicouches en CSS3 :

En CSS3, vous pouvez déclarer plusieurs valeurs d'arrière-plan dans une seule propriété, éliminant ainsi les besoin de plusieurs éléments. Par exemple :

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

Notez que seul le calque le plus bas dans un arrière-plan multicouche peut avoir une couleur d'arrière-plan.

Prise en charge des navigateurs plus anciens :

Pour les navigateurs antérieurs à CSS3, vous devez utiliser la méthode des éléments multiples pour superposer les arrière-plans. Assurez-vous que et avoir les hauteurs et les marges correctes.

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!