271
Étude de cas : Climb the Mountains
produisant. une. semi-transparence,. qui. peut. être. ajustée. jusqu’à. ce. que. l’effet. global. soit.
pleinement.satisfaisant.
div.captioned_image p.caption {
position:absolute;
bottom:0;
left:0;
margin:0;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:13px;
line-height:16px;
font-style:italic;
padding:5px;
}
On.obtient.ainsi.le.bandeau.semi-transparent.de.légende.souhaité.(voir.Figure 11.14).
Figure 11.14
La légende
transparente est mise
en place.
Comme.c’est.le.cas.avec.de.nouvelles.possibilité.CSS 3,.certains.navigateurs.restent.à.la.
traîne,. et. notamment. Internet. Explorer. (dont. la. version  8. actuelle),. qui. ne. reproduit. pas.
la transparence.alpha..Par.exemple,.Internet.Explorer 7.affiche.par.défaut.un.calque.gris.uni.
à.peu.près.acceptable,.comme.on.en.obtient.en.proposant.une.image.PNG.transparente.sans.
forcer.la.prise.en.charge.de.la.transparence.alpha.(voir.Figure 11.15).
Figure 11.15
La légende telle que
l’affiche Internet
Explorer 7.
Internet.Explorer 8,.qui.ne.prend.toujours.pas.en.charge.le.mode.RGBa,.affiche.simplement.
le.texte.de.la.légende.au-dessus.de.l’image,.sans.arrière-plan..Pour.contourner.ce.problème,.
on.peut.ajouter.une.règle.à.la.feuille.de.styles.screeni-ie8.css.pour.s’assurer.qu’un.arrièreplan.gris.est.placé.derrière.le.texte..
div.captioned_image p.caption { background:#666; }