Fond translucide
Même si opacity (translucidité) est une propriété de style définie dans la spécification CSS3, module CSS3 Color, chapitre 3.2, des navigateurs la gèrent déjà. D'après la spécification, l'opacité peut être considérée conceptuellement comme une opération de post-traitement, par conséquent le niveau de transparence choisi est appliqué à tout le contenu.
Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir du texte opaque sur un fond translucide, car si vous définissez la propriété opacity pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux.
Si vous essayez cet exemple de code, vous découvrirez que texteopaque n'est pas opaque, il a hérité de l'attribut opacity de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus.
<div id="conteneur">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
</div>
#conteneur {
background-color: #ffffff; /* le fond */
filter:alpha(opacity=50); /* Internet Explorer 6 */
-moz-opacity:0.5; /* Mozilla 1.6 et infér. */
opacity: 0.5; /* CSS3 et Mozilla récents */
}
#texteopaque {
filter:alpha(opacity=100); /* ignoré */
-moz-opacity:1.0; /* ignoré */
opacity: 1.0; /* ignoré */
}
En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement exotique d'Internet Explorer) :
- Une hiérarchie réarrangée : comme le problème principal est que le texte à rendre opaque fait partie de la boîte translucide, mettez-le en dehors de la boîte.
- Une image PNG avec canal alpha : utilisez une image de fond translucide.
Hiérarchie réarrangée
Comme suggéré précédemment, cette astuce est basée sur un autre arrangement de la hiérarchie des éléments DIV. Comme tous les descendants du DIV translucide héritent de l'opacité de leurs parents, le truc est d'utiliser deux DIV séparés pour le fond transparent et le texte opaque, placés au même niveau de la hiérarchie et non l'un dans l'autre. Les deux feront partie d'un DIV parent à positionner de manière absolue ou flottant.
<div id="conteneur">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
<div id="fondtranslucide">
</div>
</div>
Afin de placer la zone texteopaque par dessus fondtranslucide, il faut utiliser le positionnement absolu et l'attribut z-index pour le DIV contenant le texte. De plus, la hauteur et la largeur des deux DIV doivent être identiques, elles doivent donc être déclarées explicitement.
#conteneur {
position: absolute;
top: 100px; left: 400px; /* placez-le où vous voulez */
}
#fondtranslucide {
width: 250px; height: 100px; /* pour correspondre à la taille du DIV */
background-color: #ffffff; /* la couleur de fond */
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#texteopaque {
width: 250px; height: 100px; /* pour correspondre à la taille du DIV */
background-color: transparent; /* fond transparent */
position: absolute; /* positionnement absolu */
z-index: 2; /* placement sur l'autre DIV */
}
Comment retirer la hauteur fixe prédéfinie
Il est parfois problématique d'avoir une hauteur prédéfinie, parce que la longueur du texte contenu (et des images) n'est pas connue. Il est toujours possible d'éviter de fixer la hauteur, avec quelques ajouts supplémentaires. Le plus simple est de laisser grandir le DIV texteopaque autant que nécessaire, puis d'utiliser JavaScript pour redimensionner fondtranslucide à la même hauteur. Mais ce n'est pas une solution en pur CSS.
Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de texteopaque dans fondtranslucide également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement.
<div id="conteneur">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
<div id="fondtranslucide">
Ceci est un texte normal
sur un fond translucide
</div>
</div>
Image PNG avec canal alpha
Cette solution utilise toujours la hiérarchie parent-enfant, mais est en fait une technique hybride, car elle met en œuvre le fond translucide avec des moyens totalement différents selon le navigateur utilisé.
- Mozilla : la translucidité est implémentée à l'aide d'une image PNG avec un canal alpha comme image de fond de l'élément conteneur.
- Internet Explorer : comme IE6 (et les versions précédentes) ne supporte pas les images PNG avec un canal alpha, la translucidité est implémentée avec le filtre alpha de l'exemple précédent, et l'héritage des descendants est écrasé à l'aide d'un comportement non-standard d'IE.
Notes et inconvénients pour cette solution :
- Un autre DIV conteneur doit être ajouté pour que l'effet fonctionne sous Internet Explorer.
- Le DIV parent est positionné de manière absolue, et le nouveau DIV conteneur avec un fond translucide doit être un DIV normal. Celui qui contient le texte doit être positionné de manière absolue pour briser l'héritage de la transparence.
- Quelques hacks CSS doivent être utilisés pour que des règles CSS différentes s'appliquent selon le navigateur.
- Une image PNG spécifique doit être générée, avec le niveau de transparence souhaité.
<div id="conteneur">
<div id="fondtranslucide">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
</div>
</div>
#conteneur {
position: absolute;
width: 250px;
top: 400px; left: 100px;
}
#fondtranslucide {
width: 250px;
background-image: url(transparent.png) !important; /* Mozilla uniquement */
background-color: transparent !important; /* Mozilla uniquement */
background-image: none; /* IE uniquement */
background-color: #ffffff; /* IE uniquement */
filter:alpha(opacity=50); /* IE uniquement */
}
#texteopaque { position: relative; }