Solution pour éviter les problème d'héritage d'opacité ?

Je suis en train de travailler sur un design, pour lequel je ne peux pas utiliser des images transparentes (design centré dans la page, l'arrière plan est une photo). J'étais donc parti sur l'utilisation de la propriété opacity et filter:alpha...

Le problème, comme chacun sait, c'est que la propriété est héritée et que pour une raison qui m'échappe, il est impossible de remettre à zéro la transparence pour les enfants, si je défini l'opacité à 100% pour l'enfant, il reste identique à son parent. Pour finir, il n'est pas possible de définir une opacité à plus de 100%, ce qui veut dire qu'on reste bloqué.

Enfin, j'ai vu ici ou là que la solution généralement utlisée est de positionner de manière relative ou absolue un élément en superposition, mais ça ne peut bien sûr pas marcher si mon site est contenu dans un div centré dans la page.

Je me demandai si j'avais fait le tour de la question et que je devrai renoncer à l'option intialement retenue (design centré).

Merci !

Personne ?

Désolé de remonter à nouveau ce fil de discussion, mais est-ce que quelqu'un a déjà été confronté à ce problème ?

Bonjour,

J'ai déjà vu passer quelques fois cette question, il n'y a pas longtemps d'ailleurs. Je n'ai pas souvenir d'avoir lu qu'il y avait une solution, à part pour Internet Explorer où appliquer une position relative semble suffire.

Je n'ai pas bien compris pourquoi un PNG avec transparence serait incompatible avec le design centré ?

Merci Alan pour ta réponse

Un png en transparence est incompatible avec un design centré parceque lorsqu'on a une image complexe en fond d'écran (mon cas), si je fais une découpe d'un des éléments du design celle-ci sera fonction du positionnement au moment de la découpe qui lui, est fixe. Lorsque j'applique les découpes en fond de chaque élément composant le corps du site (centré), celle-ci seront forcémment décalées et ça se verra...

Ou alors il existe un moyen de définir une transparence pour un fond d'écran complexe, mais je n'ose même pas imaginer le nombre de couleurs à sélectionner pour la transparence...

Voilà pourquoi je voulai utiliser des divs avec une couleur + une opacité, qui eux sont réellements transparents... Ce problème d'héritage est quand même bien bête, un "trou" dans les spéfications CSS 2.1... On connaît bien les problème d'héritage des taille variables de texte pour les listes à plusieurs niveaux par exemple, mais dans le cas de l'opacité là on ne peut remettre celle-ci à zéro, c'est vraiment dommage !
Modifié par davidm (01 Sep 2006 - 12:37)

Bonjour,

Une url de test, svp, correspondant précisément à tes contraintes de mise en page.

Pour l'instant, tu ouvres une discussion dans le vide

Hmmm, je me sers très souvent de l'opacité et je n'ai jamais rencontré de problèmes d'héritage.

Peux-tu nous montrer un bout de ta CSS s'il te plait ?

Laurent Denis a écrit :
Bonjour,
Une url de test, svp, correspondant précisément à tes contraintes de mise en page.
Pour l'instant, tu ouvres une discussion dans le vide

Désolé Laurent, je suis bien conscient qu'il est plus facile de discuter sur du "concret". En temps normal j'aurai directement lié vers la page, mais il s'agit d'un site d'un de mes clients et j'ai une demande explicite de confidentialité sur celui là . Pour finir, je bosse en local et je n'ai pas encore transféré le site

Ceci dit, pour donner un peu plus de matière, j'ai fini par trouver une page qui explique mon problème (les pages développeur de Mozilla) :
http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

La problématique (traduite de la page en question) : "Même si l'opacité est une propriété définie dans les spécifications CSS-3 (Chapitre 3.2 Module Couleurs), les navigateurs la supporte déjà.

D'après les spéc, l'opacité d'un élément consiste en une simple opération de post-processing, de telle manière que le degré de transparence est appliqué à tout son contenu.

Cela veut dire que, si vous avez un DIV avec du texte dedans, il est impossible d'avoir un texte opaque sur fond transparent, parceque si vous définissez la propriété opacité du div contenant le texte, celui-ci hérite de la transparence et il est impossible de corriger ça... par des moyens traditionnels."

Les solutions, sont soit de modifier la cascade (voir exemple sur la page en question) soit l'utilisation de PNG alpha. Dans tous les cas, la limitation est de taille : il faut impérativement utiliser un conteneur avec un positionnement absolu.


La réponse est donc : ce que je voulais faire initialement est aujourd'hui impossible. J'ai vraiment cherché partout, même côté anglophone pas de solution...

Nigel a écrit :
Hmmm, je me sers très souvent de l'opacité et je n'ai jamais rencontré de problèmes d'héritage. Peux-tu nous montrer un bout de ta CSS s'il te plait ?

Oui bien sûr :

body {background-color: #0d4495;
background-image: url(http://localhost:8888/gican/assets/templates/gican/images/bg_gican.jpg);
background-repeat: no-repeat;
font-family: "Lucida grande",Tahoma,Verdana,Lucida,Helvetica,Arial,sans-serif;
font-size: 70%;
text-align: left;
color: black;
}

#conteneur {width: 780px;
margin: 40px auto;
padding: 0px;
background-color: transparent;
}

#topmenu {width: 750px;
background-color: #58b7d5;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: .75;
height: 30px;
padding: 5px 15px;
font-size: 1em;
color: white;
}


span.reset {opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
color: #fff;}

Evidemment, vu ce qui est expliqué sur la page de mozdev, ca ne peut pas marcher...
Modifié par davidm (01 Sep 2006 - 13:15)

davidm a écrit :
La réponse est donc : ce que je voulais faire initialement est aujourd'hui impossible.

C'était l'idée sous-jacente, pour tout dire

Mais parfois, l'examen du code suggère des biais avec des démarches différentes, permettant de s'affranchir de ce problème. Apparemment, ce n'est pas le cas ici.
Modifié par Laurent Denis (01 Sep 2006 - 13:15)