• 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...


  • Commentaires

    1
    Jeudi 23 Février 2012 à 11:02

    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);}

    2
    little star Profil de little 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 ?

    3
    Samedi 10 Mars 2012 à 18:48

    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.

    4
    Samedi 10 Mars 2012 à 19:03

    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...

    5
    Samedi 10 Mars 2012 à 19:04

    C'est peut être un problème de navigateur, il fonctionne très bien quand je vais sur ton blog.

    Tu utilise quel navigateur?

    6
    Samedi 10 Mars 2012 à 19:14

    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 ?

    7
    Samedi 10 Mars 2012 à 19:17

    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;}

    8
    Dimanche 11 Mars 2012 à 10:26

    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 !

    9
    Dimanche 11 Mars 2012 à 10:41

    '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;}

    10
    Dimanche 11 Mars 2012 à 13:53

    Ah ! C'était donc ça ! Je teste tout de suite.

    ...

    ça marche ! C'est parfait ! Merci beaucoup.

    11
    Samedi 14 Avril 2012 à 16:11

    J'ai essayer ce code , mais ça ne marche pas : 

    .module_contenu img {opacity0,5;}
    .module_contenu img:hover {opacity1;}


    Y'a un truc qui va pas ?

    12
    Samedi 14 Avril 2012 à 18:26

    Merci mimille 511 , ça marche =) Merci Nagalia pour le tuto !

    13
    Dimanche 15 Avril 2012 à 09:38

    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

    14
    Samedi 2 Juin 2012 à 16:25

    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 :)

    15
    Samedi 2 Juin 2012 à 16:39

    Tu aurais un exemple de blog? Je ne comprend pas ta question ^^'

    16
    Samedi 2 Juin 2012 à 19:03

    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)...

    17
    Samedi 2 Juin 2012 à 19:16
    18
    Samedi 2 Juin 2012 à 19:19

    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)

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    19
    Samedi 2 Juin 2012 à 22:56

    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 :$

    20
    Gaewen Profil de Gaewen
    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

    21
    Mardi 4 Septembre 2012 à 22:27

    comment on fait pour changer juste l'opacité du fond du menu ? (sans le contenu)

    22
    Vendredi 26 Octobre 2012 à 22:37

    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;}

    23
    Vendredi 26 Octobre 2012 à 22:49

    Hm... Chez moi ça marche

    Qu'est ce que tu essaie de faire avec ce code?

    24
    Lundi 5 Novembre 2012 à 15:15

    Mercii

    25
    Uryu Profil de Uryu
    Mardi 1er Janvier 2013 à 21:38

    Ca ne marche pas pour moi...


    J'ai mit ça: .partenaire img{opacity: 0.5;}
    Merci d'avance

    26
    Miss K² Profil de Miss 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 ?

    27
    Miss K² Profil de Miss 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 ?)

    28
    Jeudi 11 Juillet 2013 à 02:50

    Je voudrais bien de l'aide xo

    Je ne sais pas comment mettre de l'opacité sur le fond du menu 1 et 2

    29
    Jeudi 11 Juillet 2013 à 23:00

    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).

    30
    Samedi 1er Mars 2014 à 09:04

    je souhaiterai juste mettre les images de mes menus en opaque 0.5

    mais je n'ai absolument rien compris :/

    31
    Mercredi 5 Mars 2014 à 15:21

    Tu es vraiment géniale! >3< J'ai tout compris!!

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :