Problème avec opacity et div enfant

Bonjour à tous,

Le problème avait déjà été posé mais il y a de ça près de 3 ans donc je me dis que ça a peut-être changé depuis :

Sous Safari 4 (webkit), en CSS3, je voudrais utiliser le style "opacity".

<div class="opacity:0.5; background-color:red">
  <div>Coucou</div>
</div>

Ca fonctionne, le fond est à moitié transparent, mais "opacity" s'applique aussi sur le "div" enfant. Est-ce qu'il y a un moyen de contourner ça ?
Je pourrais utiliser un .png mais ce serait quand même dommage je trouve.

Merci pour vos conseils !

Si tu donnes une opacité de 1 à l'enfant, ça donne quoi ?

EDIT : Testé dans FF3.5 et Safari 4, ça ne fonctionne pas, même en tentant 1.5 :o
Modifié par Skoua (30 Jun 2009 - 17:05)

Skoua a écrit :
Si tu donnes une opacité de 1 à l'enfant, ça donne quoi ?

EDIT : Testé dans FF3.5 et Safari 4, ça ne fonctionne pas, même en tentant 1.5 :o

1.5 est une valeur incorrecte, donc ça sera ignoré. 1 est la valeur par défaut (tout élément a, par défaut, une opacité de 1, c'est-à-dire 100%.

Le problème ici est que l'opacité s'applique à un élément dans sa globalité (enfants et descendants compris). C'est un fonctionnement tout à fait logique. Il ne s'agit pas d'une valeur héritée par les enfants, qui pourraient être remis à opacity:1. Si la valeur d'opacity était héritée par les enfants et descendants, ça provoquerait un bordel monstrueux à la moindre application de la propriété opacity sur un conteneur...

Si on veut un fond translucide, et un contenu opaque, on se trompe tout simplement de propriété CSS en utilisant opacity. Il faudrait plutôt utiliser les couleurs RGBA:

background-color: rgba(255,0,0,.5);

Oui le 1.5 c'était histoire de tester hein.

Merci pour ta réponse même si ce n'est pas moi qui ai posé la question, j'ai appris quelque chose.

Bonjour à tous !!!!!

Bah c'est bien joli le rgba, mais IE est totalement à la ramasse concernant cette fonctionnalité CSS 3 (comme pour beaucoup d'autres choses, d'ailleurs)

Voilà, c'est mon premier post pour mettre mon petit grain de sel puisque je suis dans le même embarrât et que je suis également à la recherche d'une solution compatible pour tous les navigateurs !

Si certains d'entre vous ont la solution miracle...

nanti a écrit :

Bah c'est bien joli le rgba, mais IE est totalement à la ramasse concernant cette fonctionnalité

Ben oui mais pour opacity aussi, donc c'est que notre ami ne cherche guère un support parfait pour IE sur ce point.
Modifié par Benjamin D.C. (02 Jul 2009 - 16:56)

Salut Benjamin !

En ce qui le concerne, il est probable qu'il laisse tomber le compatibilité, mais perso, c'est un impératif.

Je vais donc encore fouiller un peu partout à la recherche de cette solution que j'attends et qui semble tenir du miracle !

Pourquoi ne pas appliquer tout simplement une image transparente en background ?
La compatibilité avec la transparence alpha n'est pas idéale mais on arrive toujours à s'arranger avec l'alpha image loader.
Certes, il serait vachement plus mieux de pouvoir gérer ça par les couleurs RGBA, mais dans ton cas...