Est-il possible, en utilisant uniquement les CSS, de rendre l'arrière-plan d'un élément semi-transparent mais de rendre le contenu (texte et images) de l'élément opaque ?
J’aimerais que cela se fasse sans que le texte et l’arrière-plan soient deux éléments distincts.
En essayant :
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
Il semble que les éléments enfants soient soumis à l'opacité de leurs parents, donc opacity:1
est relatif à l'opacity:0.6
du parent.
La méthode la plus simple consiste à utiliser une image PNG à fond semi-transparent.
Vous pouvez utiliser JavaScript pour que cela fonctionne dans [Internet Explorer 6][1] si nécessaire.
J'utilise la méthode décrite dans [PNG transparents dans Internet Explorer 6][2].
Sinon, vous pouvez le simuler en utilisant deux éléments frères et sœurs côte à côte - en rendre un semi-transparent, puis positionner absolument l'autre par-dessus.
[1] : http://en.wikipedia.org/wiki/Internet_Explorer_6 [2] : http://24ways.org/2007/supersleight-transparent-png-in-ie6
Le problème est que le texte a une opacité totale dans votre exemple. Il a une opacité totale à l'intérieur de la balise p
, mais la balise p
est juste semi-transparente.
Vous pourriez ajouter une image d'arrière-plan PNG semi-transparente au lieu de la réaliser en CSS, ou séparer le texte et le div en deux éléments et déplacer le texte au-dessus de la boîte (par exemple, marge négative).
Sinon, ce ne sera pas possible.
Comme Chris l'a mentionné : si vous utilisez un fichier PNG avec transparence, vous devez utiliser une solution de contournement JavaScript pour le faire fonctionner dans ce satané Internet Explorer...
[Opacité du fond, mais pas du texte][1] a quelques idées. Il faut soit utiliser une image semi-transparente, soit superposer un élément supplémentaire.
[1] : https://stackoverflow.com/questions/637921/opacity-of-background-not-text