Css3, transition opacity sauf sur background

Salut,

Bon, j'ai une colle...

J'ai une zone avec un fond textuel de base.
J'ai x boutons.
Au survol de chacun d'eux, j'affiche un contenu spécifique via des div.
Je fais une transition en opacity pour faire joli via

-moz-transition: opacity xxxms linear;

Si je passe de bouton 1 à bouton 2, contenu 1 disparait lentement, contenu 2 apparait lentement, et l'on voit, entre temps, par transparence, le fond textuel de ma zone... et c'est moche.

J'ai donc pensé mettre sur mes div de contenu un background de la couleur du fond de ma page qui lui ne serait pas en transition, ainsi, lors d'un changement de bouton, mon contenu apparait toujours lentement, mais mon background, lui, apparait instantanément cachant le fond de la zone.

J'espère avoir été assez clair.

Le hic, c'est comment dire :
"Toute la div subit la transition opacity sauf l'élément background."

Merci.

Toujours personne ?

Bon, en attendant, j'ai ajouter une div à tout mes contenus pour masquer le fond.
... mais c'est pas top.

Salut,
Non, ce n'est pas très clair...As tu un exemple de code a nous montré?

Bonjour,

d'après ce que je comprends, tu risques avoir du mal puisque le background n'est pas un élément, mais une propriété de ton élément : ils sont indissociables. La meilleure astuce que je vois serait de placer un second background opaque dans un ::after, positionné comme il faut en z-index entre ton fond textuel et ton contenu qui disparait / apparait.

J'espère avoir bien compris ta demande, bon courage !

Pareil: le background appartient à l'élément, il est bien entendu impacté par l'opacité de l'élément.

Hello.

Idem, pas sur d'avoir totalement bien compris. Dans le doute, je lance une idée comme ça : au lieu de jouer sur la propriété opacity, si tu faisais varier font-color pendant la transition (avec du RGBa et un alpha nul entre deux états)?

... mouais, pourquoi faire des phrases...

Donc, ce fut bien cela.
Langage de pro de la mort du css :
" Peut-on empêcher une propriété d'un élément de subir une modification complète de cet élément ?"

Comme je me lance sur css3, je me demandais s'il existait pas un truc du style "ne pas faire ça".

Bon, je vais regarder du coté des idées de Ten et Florian_R, mais je crois que la div supplémentaire restera.

Tant pis.

Merci
Modifié par Ehplod (11 Oct 2011 - 18:52)