1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: Couleurs et fonds
slug: Astuces_CSS/Couleurs_et_fonds
tags:
- CSS
translation_of: Web/CSS/color_value
---
<p>
</p>
<h3 id="Fond_translucide"> Fond translucide </h3>
<p>Même si <i>opacity</i> (translucidité) est une propriété de style définie dans la spécification CSS3, <a class="external" href="http://www.w3.org/TR/css3-color/#transparency">module CSS3 Color, chapitre 3.2</a>, des navigateurs la gèrent déjà. D'après la spécification, <i>l'opacité peut être considérée conceptuellement comme une opération de post-traitement</i>, par conséquent le niveau de transparence choisi est appliqué à tout le contenu.
</p><p>Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir <b>du texte opaque sur un fond translucide</b>, car si vous définissez la propriété <i>opacity</i> pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux.
</p><p>Si vous essayez cet exemple de code, vous découvrirez que <b>texteopaque</b> n'est pas opaque, il a hérité de l'attribut <code>opacity</code> de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus.
</p>
<pre><div id="conteneur">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
</div>
</pre>
<pre>#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é */
}
</pre>
<p>En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement <i>exotique</i> d'Internet Explorer) :
</p>
<ul><li> <b>Une hiérarchie réarrangée</b> : 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.
</li></ul>
<ul><li> <b>Une image PNG avec canal alpha</b> : utilisez une image de fond translucide.
</li></ul>
<h4 id="Hi.C3.A9rarchie_r.C3.A9arrang.C3.A9e"> Hiérarchie réarrangée </h4>
<p>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.
</p>
<pre><div id="conteneur">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
<div id="fondtranslucide">
</div>
</div>
</pre>
<p>Afin de placer la zone <b>texteopaque</b> par dessus <b>fondtranslucide</b>, il faut utiliser le positionnement absolu et l'attribut <i>z-index</i> 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.
</p>
<pre>#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 */
}
</pre>
<p><br>
</p>
<h5 id="Comment_retirer_la_hauteur_fixe_pr.C3.A9d.C3.A9finie"> Comment retirer la hauteur fixe prédéfinie </h5>
<p>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 <b>texteopaque</b> autant que nécessaire, puis d'utiliser JavaScript pour redimensionner <b>fondtranslucide</b> à la même hauteur. Mais ce n'est pas une solution en pur CSS.
</p><p>Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de <b>texteopaque</b> dans <b>fondtranslucide</b> également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement.
</p>
<pre><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>
</pre>
<h4 id="Image_PNG_avec_canal_alpha"> Image PNG avec canal alpha </h4>
<p>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é.
</p>
<ul><li> <b>Mozilla</b> : 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.
</li></ul>
<ul><li> <b>Internet Explorer</b> : 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.
</li></ul>
<p>Notes et inconvénients pour cette solution :
</p>
<ul><li> Un autre DIV conteneur doit être ajouté pour que l'effet fonctionne sous Internet Explorer.
</li><li> 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.
</li><li> Quelques hacks CSS doivent être utilisés pour que des règles CSS différentes s'appliquent selon le navigateur.
</li><li> Une image PNG spécifique doit être générée, avec le niveau de transparence souhaité.
</li></ul>
<pre><div id="conteneur">
<div id="fondtranslucide">
<div id="texteopaque">
Ceci est un texte normal
sur un fond translucide
</div>
</div>
</div>
</pre>
<pre>#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; }
</pre>
{{ languages( { "en": "en/Useful_CSS_tips/Color_and_Background" } ) }}
|
