En quoi les arrière-plans HTML `` et `` diffèrent-ils et comment puis-je utiliser plusieurs arrière-plans efficacement ?

Application d'un arrière-plan à et/ou

Lors de l'application d'un arrière-plan au ou éléments, on pourrait remarquer une différence de comportement. Avec un arrière-plan défini sur le , il englobe la page entière, tandis que l'élément l'arrière-plan de l'élément est limité à la zone où le contenu est affiché.

Pourquoi cet écart ?

En mode standard, l'icône et les éléments ne remplissent pas intrinsèquement la hauteur de la fenêtre. Cependant, le champ l'élément adoptera l'élément couleur d'arrière-plan de l'élément si elle n'est pas explicitement définie. Par la suite, cet arrière-plan hérité devient l'arrière-plan du canevas, couvrant toute la fenêtre d'affichage.

Superposition de plusieurs arrière-plans

Pour obtenir un effet d'arrière-plan superposé, combinez deux propriétés d'arrière-plan dans un seul élément (par exemple, ) est recommandé. L'utilisation des propriétés background-image et background-color, ou de la propriété raccourci background, permet une fusion transparente.

Par exemple, pour superposer une image d'arrière-plan transparente sur une couleur d'arrière-plan unie, utilisez :

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

Utilisation de plusieurs arrière-plans

Pour combiner plusieurs images d'arrière-plan, tenez compte des éléments suivants méthodes :

CSS2 :

Définissez différentes images d'arrière-plan sur le et éléments, garantissant que le la hauteur et la hauteur minimale de l'élément sont définies :

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

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

CSS3 :

Utilisez la syntaxe d'arrière-plan multiple dans une seule propriété :

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

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!