Aller au contenu
xpatval

Opacité et superposition de couches

Noter ce sujet :

Recommended Posts

Bonjour,

 

Bon, titre bizarre...

En fait, mon problème est le suivant: j'ai un container, avec une opacité (css) de 0.8. Celui-ci contient d'autres containers, pour lesquels je ne veux pas d'opacité (des images, notamment). Or, malgré un test avec opacity à 1 (toujours css, et dans ces "sous-containers"), je n'obtiens rien de plus. Comment dois-je m'y prendre ? Dois-je jouer avec des z-index ?

 

Merci de vos réponses

Partager ce message


Lien à poster
Partager sur d’autres sites

l'opacité du parent s'applique a son propre container, si le premier niveau est a 0.8 et dedans tu met un 1.0 ça sera 1.0x 0.8 donc 0.8; Si tu le met à 0.5, ça sera 0,5x 0,8 d'opacité soit 0.4 d'opacité pour l'enfant.

Si tu désire qu'un container interne ai une opacité de 1.0, tu peux éventuellement le mettre en position: absolute au même niveau que ton container transparent, et jouer avec le Z-index en effet.

 

Si c'est juste pour avoir un fond un peu transparent de couleur, je ne peux que te conseiller d'utiliser la propriété css "background-color: rgba(0a255rouge, 0a255vert, 0a255bleu, opacité). Si tu veux du noir (0, 0 et 0 en RGB) avec une opacité de 0.8, tu peux donc mettre background-color: rgba(0,0,0,0.8); et le tour sera joué :)

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci de ta réponse. Je suis un peu étonné du résultat: à l'origine, j'avais dans le container parent un background-color: #333; suivi d'un opacity:0.8; . Le container fils était lui aussi opacifié (ce que je ne voulais pas, d'où ma question ici). Le simple fait de changer le #333 en rgba(51,51,51,0.8) me permet d'arriver au résultat escompté ! Pourquoi ? 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×