CSS, transparence et chevauchement
Comme tout bon développeur web, je me suis attaqué à la transparence d’éléments d’une page web par l’application de styles css.
Première approche
La solution est simple et trouvée depuis bon nombre d’années, elle se compose ainsi pour une opacité de 50% ou une transparence de 50%:
-moz-opacity:0.5; opacity: 0.5; filter:alpha(opacity=50);
Problématique de l’héritage
La transparence comme d’autre propriété est héritée par les enfants qui intègrent l’élément père. Ainsi pour un bloc div, le code suivant
<div style="display: block; height: 115px;position:relative">
<img style="float:left " src="image" alt="" />
<div style="opacity: 0.5; background-color: blue; position:absolute">
<div style="opacity: 1;">
Texte
</div>
</div>
</div>donne ceci
Les div imbriquées dans l’élément portant la transparence sont elles aussi affectées par cette transparence.
L’héritage est non modifiable, et l’ajout de propriétés d’opacité aux éléments sous-jaçants ne modifie pas leurs transparence.
La solution est alors de créer deux éléments non imbriqués qui se superposent, en mettant en premier plan l’élément opaque.
Le code devient
<div style="display: block; height: 115px;">
<img style="float:left " src="image" alt="" />
<div style="position:relative">
<div style="opacity: 0.5; background-color: blue; position:absolute"></div>
<div style="position:absolute">Texte</div>
</div>
</div>Pour afficher ceci, dans lequel le texte est bien en opacité totale