Discussion :

[boutmos]

bonjour,

J'aimerais fixer l'opacité d'une div a 50% mais sans affecter l'opacité de ses enfants :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="pfA">
	<h4>What Is This?</h4>
	<p>Learning jQuery is a multi-author weblog providing [..]</p>
</div>

Pour des raisons de multiples ecritures, j'affecte celui ci en JS via JQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#pfA").css("background-color", "#DDD").css("opacity", "0.5").css("border", "1px solid #AAA");

existe il un selecteur qui permettrait d'eviter que les enfants héritent des propriétés du parent ? Merci

CF, pieds de page => http://ia62.ac-lille.fr/test/

[kohsaka]

Salut,

Non, il n'y a pas de solution pour ce que tu veux faire, en css.
En revanche tu peux réaliser ton effet en utilisant un png que tu mettras en background.

[boutmos]

Oui mais j'aurais le probleme d'IE6 qui ne gere qu'a moitié cette transparence...

A moins d'utiliser le plugin pngFix de Jquery.

Mais avant de pouvoir faire çà , j'ai deja un soucis de taille que je n'arrive pas a m'expliquer :

Les PNG que je crées ne veulent pas s'afficher dans mes pages web alors que ceux que je recupere sur iconFinder s'affichent tres bien ...

[cahnory]

Le problème ici c'est qu'il ne s'agit pas vraimens d'héritage mais si ta boite fait 50% d'opacité, son contenu fait 100% de 50% d'opacité. Les propriétés sont bien différentes mais elle se réfèrent pas à la même valeur de départ.
Tu peux essayer de mettre un div en absolute à l'intérieur de ton block, ce div aura top: 0; left: 0; right: 0; bottom: 0; ce qui ne marche pas sous ie et nécessitera un js (ne marchera pas non plus sous ie si tu fait top: 0; left: 0; width: 100% height: 100%.
Tu joues de la position de tes éléments où du z-index pour faire passer ce div en dessous et à celui-ci tu applique une opacité.

[boutmos]

Re,

Donc j'ai adopté la methode du PNG. et testé le plugin ifixpng pour Jquery.

quelques bug constatés :

- Sous IE6, le slideShow bug, mes images PNG ne sont plus affecté par la propriété overflow dans le slideshow lorsqu'elles passent en zone non visible.

-sous IE6 je n'ai pas de background repeat sur les PNG qui sont supposés mettre a 50% l'opacité de mes backgrounds.

-sous IE7, grosses dégradation des 3 PNG situés dans le slideShow.

Help

[kohsaka]

Sur la premiere page du plugin que tu utilises

Known limitations
(I don't have solutions for those listed below yet - CSS features that are lost when the fix applied)

• Always defaults to "background-position:top left" and you cannot reposition it.

• Unable to perform "background-repeat:repeat-y" or "background-repeat:repeat-x" on a target.

• For the hack to work your item needs to be visible.

Quand il s'agit de rendre un background transparent, je passe généralement par ce plugin ci :
http://www.twinhelix.com/css/iepngfix/

Tu rencontrera peut être moins de problème.
Je crois que j'ai déjà eu ce problème de background qui ne répète pas sur ie6. La seul solution que j'avais trouvé c'était de faire une images assez grande pour ne pas avoir a répéter mon image :/

Sinon, les png fonctionne sur ie7 je vois pas pourquoi ca bug, reste a savoir ce que tu appelles "dégradation". si tu fais un fade dessus, alors la transparence est moche le temps de l'animation