-
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 ;)
Opacitysé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.
RGBACertaine 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...
-
Commentaires
2little star
Samedi 10 Mars 2012 à 18:45
Mon code ne fonctionne pas... On ne me dit pas qu'il comporte une erreur, mais rien ne se passe. J'avait envie de diminuer l'intensité des avatars de mes derniers visiteurs (en attendant de trouver comment les faire redevenir normaux au passage de la sourie)
.module_menu_type_lastvisitors img {opacity: 0,5;}
il faut que je supprime les espaces ?
Si un message s'affiche en indiquant une erreur, c'est que tu a oublié ou mis une accolade en trop dans ton code.
Celui que tu m'a montré semble correcte, les espaces ne sont pas un problème.
Est-il possible que mon ordi ne réagisse pas tout de suite ? Car quand je clique sur sauvegarder & appliquer, on menu déroulant à gauche (comme le tien) saute un peu puis plus rien...
C'est peut être un problème de navigateur, il fonctionne très bien quand je vais sur ton blog.
Tu utilise quel navigateur?
Safari. Et j'ai vérifié, même le CSS3 marche...
Peut-être qu'il suffi juste d'attendre que mon ordi réagisse... Sinon, comment faire pour que tout redevienne normal au passage de la sourie ?
Pour l'opacité tu veux dire? Il faut utiliser le pseudo classe :hover
.module_menu_type_lastvisitors img {opacity: 0,5;}
.module_menu_type_lastvisitors img:hover {opacity: 1;}
D'accord ! Je vais tester ça tout de suite !
Edit : ça ne marche pas pour moi. Mais si tu dit que les autres peuvent le voir, alors pas de problème, merci de ton aide !
'tit bug que je viens de remarquer pour l'opacité dans ton code: il faut mettre un point, pas une virgule ;)
.module_menu_type_lastvisitors img {opacity: 0.5;}
Ah ! C'était donc ça ! Je teste tout de suite.
...
ça marche ! C'est parfait ! Merci beaucoup.
J'ai essayer ce code , mais ça ne marche pas :
.module_contenu img {opacity: 0,5;}
.module_contenu img:hover {opacity: 1;}Y'a un truc qui va pas ?
super tuto mais comment on fait pour que au passage de la souris ça ne soit pas automatique, que ça mette 2secondes par exemple pour qu'on voie l'image normalement ?
merci
Bonjour, je voulais savoir comment on faisait pour mettre cette opacité en fond de page, car sur beaucoup de de blogs, il y a un fond de fenêtre quelconque et en fond de page, une opacité qui rend ce fond de fenêtre plus opaque et je trouve que ça rend bien. Est-ce bien du CSS? Si oui, quel est le code pour ça? Merci :)
Hum, je me souviens que le blog de Sacha03 avait ça, comme effet mais... ce comte a été supprimé (ou s'est supprimé lui-même, je n'en sais rien)...
Oui, c'est ça! Mais j'aurais préféré que ce soit avec 3 parties de transparence : la page (au centre), la menu de droite et celui de gauche ö (comme sur le blog de Sacha03)
J'ai une question en faite je veux mettre une opaticité sur mais images mais j'ai pas envie qu'il y est une opaticité sur les image dans mon menu enfin voila mais je sais pas comment faire désoler si tu na pas compris la question :$
20Gaewen
Mardi 14 Août 2012 à 23:35
J'ai une question je souhaiterait que mes article soit transparent mais aussi le menu de droite
c'est quoi le code css ? sachant que je ne veut pas mettre d'image derriére
merci d'avance
Hey! Moi ca ne marche pas! J'ai fait ce code :
.module_menu_type_lastvisitors img {opacity: 0.5;}
.module_menu_type_lastvisitors img:hover {opacity: 0.1;}25Uryu
Mardi 1er Janvier 2013 à 21:3826Miss K²
Vendredi 1er Mars 2013 à 16:37
Comment on fait si on veut que l'opacité soit à 1 seulement lorsqu'on passe dessus avec le curseur ?
27Miss K²
Vendredi 1er Mars 2013 à 16:56
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 ?)
Je voudrais bien de l'aide xo
Je ne sais pas comment mettre de l'opacité sur le fond du menu 1 et 2
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).
je souhaiterai juste mettre les images de mes menus en opaque 0.5
mais je n'ai absolument rien compris :/
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog
C'est pour modifier l'opacité d'une couleur
on écrit la couleur avec 3 valeur (R, G, B) et on rajoute une valeur (que l'on appelle alpha) pour l'opacité, ce qui donne: rgba(R, G, B, A)
par exemple, pour faire du blanc un peu transparent en fond des articles:
.module_contenu {background: rgba(255, 255, 255, 0.5);}