Problème d'opacity et de z index

Bonjour,

J'ai un div avec une opacity à 20 %.
Dans ce div j'ecris du texte , hors ce texte est lui aussi avec une opacity de 20 % .

J'aimerais que ce texte soit visible correctement ( sans opacity donc )

L'idée que j'ai eu c'est de faire 2 div inbriqué avec des z index pour que celle à l'interieur passe au dessus :

<div style="background-color:#FFFFFF;filter : alpha(opacity=20);-moz-opacity : 0.2;opacity : 0.2;z-index:10;" >
<div style="z-index:20;"> TEXTE BLABLA BLABLA </div>
</div>

Probleme ca ne marche pas le texte est toujours avec une opacité .

Comment faire svp ?
Modifié par stel (23 Dec 2008 - 13:03)

à partir du moment ou la second div est à l'intérieur de la seconde le z-index est inutile. Il faut soit faire 2 div l'un après l'autre, remis l'un par dessus l'autre avec du positionnement absolu (bof bof) soit utiliser un fond transparent (png) avec une seule div (ok, ça marchera pas avec IE6, mais c'est mieux que rien).

Je ne sais pas si remettre les taux d'opacité à 100% dans la seconde div marcherait (à tester donc).

Bonjour,

OUBLIEZ -MOZ-OPACITY BERDEL DE MORDE, C'EST OBSOLÈTE DEPUIS DES ANNÉES!

Pour rappel, les seules versions de Firefox qui ont jamais eu besoin de -moz-opacity étaient les versions 0.8 et inférieures.

Pour le problème lui-même, c'est une conséquence normale de l'opacité, qui s'applique à tout l'élément et à ses contenus, et pas de manière discriminatoire aux fonds et bordures et pas aux textes et autres contenus.

Pour des fonds translucides, on pourra utiliser des images PNG ou des couleurs RVBA. Vu le faible support de ces dernières, la solution la plus simple est d'utiliser des images PNG... et de ne pas chercher excessivement à obtenir un rendu parfait dans IE6, parce que c'est trop de boulot.

PS: je ne crie pas sur stel qui, à coup sûr, n'a fait que suivre des tutoriels et articles disponibles en ligne. Mais si ça peut s'imprimer dans la tête des quelques lecteurs de ce sujet, ça sera ça de pris.

Non non je n'ai pas lu de tuto sur ce coup la
J'ai juste cherché comment faire opacité sur beaucoup de navigateur donc j'ai ajouté tout ca , je ne savais pas que moz-opacity etait obsolete , je vais le supprimer merci pour l'info .

Pour mon problème c'est chiant car malheureusement beaucoup de gens sont encore sous ce vieux dinosaure de IE6 .

J'ai essayé le coup de mettre une opacité a 100 % au div interieur mais ca ne fonctionne pas .

Je vais essayé de faire un truc avec les position absolus et le z index mais je sent que ca va etre galère .

Bref je crois que mon problème n'est pas vraiment résolvable si on peut que ca marche sous IE6/7 et firefox au moins .

Pour IE6 tu peut substituer les les PNG avec des images GIF (donc transparence moins belle) via des commentaires conditionnels (les hack c'est pas optimal). Ce n'est pas aussi beau, mais ça sauve les meubles.

Bonjour tout le monde.

Pour les png transparents sous IE6, tu peux tout simplement utiliser le filtre suivant :

background-image: url(image.png);
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='image.png');

Il te permettra d'avoir une transparence de ton png sous IE6

intéressant , ton petit truc

Sinon j'utilise aussi un hack ...c'est plus lourd et parfois ca bug bien aussi, mais en général ça sauve les meubles

lilycoeur a écrit :
Pour les png transparents sous IE6, tu peux tout simplement utiliser le filtre suivant

Oui mais non, car:
1. Impose d'utiliser le hasLayout, ce qui n'est pas toujours souhaitable.
2. Nombreux effets secondaires propres à ce filtre DirectX.
3. Complexifie la maintenance du site.
4. Impact de performance (ralentit l'affichage de la page de 100ms pour chaque élément visé).

Donc bon, si on peut éviter, c'est mieux.

Petit rappel sous forme de question: IE6, combien de divisions?
Modifié par Florent V. (23 Dec 2008 - 15:46)

La meilleure solution est d'utiliser un png semi-transparent comme image de fond plutot que de jouer avec l'opacité. C'est possible de redonner une opacité complète aux éléments enfants, mais c'est beaucoup de travail, de markup supplémentaire et de prise de tête. Mais c'est faisable.

Et pour IE6 qui ne connait pas le png transparent alors oui, il est toujours possible d'avoir recours à des astuces pour le faire fonctionner correctement mais ça pose plus de problèmes que ça n'en résout (performance, bugs en cascade, etc)

Donc, comme je disais, la meilleure solution selon moi est de laisser un fond plein pour IE6, tant pis pour lui. C'est juste un élément esthétique supplémentaire, et bien si les gens veulent avoir un site qui ai plus de gueule, ils prendront un navigateur plus performant.

C'est la même différence entre IE6 et le reste qu'entre les télés noir et blanc et les télés couleurs. C'est mieux en couleur, mais faut avoir le matos pour. Et sinon, et ben on a la version noire et blanc (IE6), ça se regarde quand même, mais on perds un morceau.