Eklablog
Editer l'article Suivre ce blog Administration + Créer mon blog

Opacité

Comment régler l'opacité des images, d'un élément ou d'une couleur? Avec la propriété "opacity" ou avec les couleur rgb et la valeur alpha ;)

Opacity
sélecteur {opacity: valeur;}

Opacity admet une valeur entre 0 (transparent) et 1 (totalement visible). Si vous voulez nuancer l'opacité, mettez par exemple 0.5
/!\ Il faut mettre un point, non une virgule ;)
Ecrite ainsi, cette propriété modifie l'opacité de tout un élément: texte, image, fond, ombre...

Pour que seule les images est une opacité plus faible (et que votre article ne devienne pas transparent en même temp) il faut écrire le sélécteur, en précisant que les propriété ne s'appliqueront qu'aux images:

sélecteur img {opacity: valeur;} 

Maintenant, seules les images à l'interieur de se sélecteur auront une opacité différente.

RGBA

Certaine fois, il serait pratique de pouvoir rendre une couleur un peu plus transparente, comme le fond d'un article, sans  que le texte ne devienne aussi transparent. Pour cela, on utilise rgba.
Il faut savoir maitriser les couleur rgb (voir Couleur) auquel on rajoute la valeur alpha qui va nous permettre de régler l'opacité. On note le code suivant:

sélecteur {propriété: rgba(Rouge, Vert, Bleu, Alpha);}

On change les valeur de Rouge, Vert et Bleu avec un nombre compris entre 0 et 255 pour donner la couleur. Ensuite, on change Alpha par une valeur comprise entre 0 (transparent) et 1 (totalement visible). Comme pour opacité, on note 0.5 avec un point, non avec une virgule.

/!\ ça semble logique, mais rgba ne s'utilise qu'avec des propriété qui utilise des couleur comme background-color, color, box-shadow...

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
N
Tu es vraiment géniale! >3< J'ai tout compris!!
Répondre
K
je souhaiterai juste mettre les images de mes menus en opaque 0.5<br /> mais je n'ai absolument rien compris :/
Répondre
A
mimille511 : C'est exactement ce que j'ai fais mais comme tu as du penser, ça ne le met pas seulement sur le fond, mais sur tout le menu (donc aussi sur les écritures et autres).
Répondre
A
Je voudrais bien de l'aide xo<br /> Je ne sais pas comment mettre de l'opacité sur le fond du menu 1 et 2
Répondre
K
Merci Mimille :3 !! (et j'essaye de faire ça sur les derniers visiteurs, comment je fais si je veux que seulement l'icone du visiteur que je survole soit opaque mais que les autres restent en plus transparente ?)
Répondre