71
Utilisation des effets d’arrière‑plan
background: #effce7 url(/img/bottom-left.gif) É
no-repeat left bottom;
}
.box-outer {
background: url(/img/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(/img/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(/img/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
Figure 4.11
Boîte à coins masqués.
La. principale. différence,. hormis. le. fait. que. vous. utilisiez. des. images. différentes,. tient. à.
l’ajout.d’une.couleur.d’arrière-plan.à.la.div.principale.de.la.boîte..Si.vous.souhaitez.modifier.
la.couleur.de.la.boîte,.il.suffit.de.modifier.la.valeur.de.couleur.dans.le.fichier.CSS,.sans.créer.
de.nouvelle.image..Cette.méthode.ne.convient.que.pour.des.boîtes.très.simples,.mais.elle.est.
d’une.extrême.flexibilité.et.peut.être.utilisée.à.l’infini.dans.différents.projets..
Images d’arrière-plan multiples
Les. précédents. exemples. sont. très. intéressants,. mais. ils. imposent. presque. tous. d’ajouter.
des. éléments. non. sémantiques. dans. le. code,. car. il. n’est. possible. d’ajouter. qu’une. seule.
image.d’arrière-plan.par.élément..Ne.serait-il.pas.formidable.qu’on.puisse.ajouter.plusieurs.
images.d’arrière-plan.à.la.fois ?.Les.CSS 3.le.permettent..La.syntaxe.est,.en.outre,.d’une.
simplicité. absolue. et. prend. la. même. forme. que. pour. les. images. d’arrière-plan. standard..