Jump to content
xpatval

Opacité et superposition de couches

Rate this topic

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

Share this post


Link to post
Share on other 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é :)

Share this post


Link to post
Share on other 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 ? 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...