Opacity et font

Bonjour,

voilà mon ptit souci :

J'ai une div à qui je voudrais appliquer une opacity 0.5 (par exemple) mais que le texte que je passe dedans soit en opacity 1?

Exemple:

<div style="background-color:gray; opacity:0.5;"> Salut tout le monde </div>

Sauf que comme ça mon texte est à 0.5 aussi

Merci

Bonjour,

as-tu testé:

<div style="background-color:gray; opacity:0.5;">
<p style="opacity:1;">Salut à toi</p>
</div>

? Moi pas, mais si tu veux appliquer 2 instructions identiques avec des valeurs différentes, autant les appliquer à 2 éléments différents (ma phrase est probablement moins claire que le code, désolé)

Non ça ne passe pas

On dirait qu'il prend forcement l'opacity du parent ....

Ok

donc une div enfant hérite forcement de l'opacity de son parent. (c'est génétique ^^)

Donc y'a qu'une chose à faire:

<div id="fond_transparent"></div><div id="blabla">ben blabla</div>

#fond_transparent {
position:absolute;
overflow: auto;
left: 25px;
width: 500px;
height: 500px;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}

#blabla {
position:absolute;
overflow: auto;
left: 25px;
width: 500px;
height: 500px;
color:black;
background: transparent;
}

En espérant que ça serve pour d'autre

Heu... c'est un peu pas terrible* comme solution, tout de même. Ça oblige à figer les hauteurs, et à utiliser le positionnement absolu, deux choses dont mieux vaut se passer si ça n'est pas réellement nécessaire.

S'il s'agit juste d'afficher une couleur de fond translucide pour un bloc dont le contenu (texte, images) serait opaque, il y a deux solutions:
- utiliser une couleur RVBA comme couleur de fond;
- utiliser une image de fond en PNG24.

Pour la première solution, on pourrait avoir:

div {
	background: rgba(160,160,160,0.5);
}

Le problème, c'est que les couleurs RVBA sont mal supportées par les navigateurs actuels.

Donc on utilisera plutôt une image de fond:

div {
	background: url(fond-translucide.png);
}

Il n'y aura que le cas IE6 à gérer, et là soit on reste sur un fond opaque, soit on utilise le filtre AlphaImageLoader (la FAQ du forum en parle).

Voili voilou.

--
* J'avais écrit «un peu de la m...» au départ, mais restons mesuré.