Opacity

Bonjour tout le monde,

Pouvez-vous m'éclaircir sur le sujet concernant l'opacity css3 :

En exemple :

.test-img {
	opacity: 1;
}
.test-img:hover {
	opacity: 0.5;

Si je souhaite ajouter une couleur à l'image, tout en jouant avec l'opacity car dans l'exemple, c'est juste l'opacity qui éclaircie l'image...

Merci d'avance

Hello Greg,

L'opacity va juste jouer avec la transparence. Il est donc normal que dans ton exemple, tu n'ai pas d'effet sur la couleur.

Si tu veux changer la couleur de ton image, tu peux changer d'image sur le hover ou utiliser les filtres CSS http://html5-demos.appspot.com/static/css/filters/index.html (par contre ils ne sont pas beacoup supportés sur les navigateurs : http://caniuse.com/#search=filter).

Bye

Autre point à voir aussi, pour avoir un effet quasiment identique , tu pourais jouer avec la transparence de couleur : RGBa
par exemple

.test-img {
	background-color: rgba(0, 0, 255, 1); /* un arrière-plan bleu opaque */
}
.test-img:hover {
	background-color: rgba(0, 0, 255, 0.2); /* un arrière-plan bleu à 20% de transparence */
}

pour creusez un peu sur le sujet n'hesite pas à consulter sur http://integrateurinformatique.com/la-transparence-de-couleur-en-css3/

Bonjour,

J’ajouterais à titre informatif que
* la propriété Opacity va jouer sur la transparence de l'élément entier (fond+texte+...). Elle s'exprime soit en pourcentage soit en un entier à décimale sans unité (par exemple pour une semi transparence 50% est équivalent à .5)
* L'utilisation de couleur au format RGBA (soit Red Green Blue Alpha où Alpha est la transparence de 0 à 1) applique une transparence uniquement à la couleur concernée et n'agit pas sur les autres composantes de l'élément visé. (valeurs de 0 à 1)

Cas d'utilisation au sein des filtres propriétaires de Microsoft:
A savoir aussi que lors de l'utilisation de filtre Microsoft (syntaxe filter:progid:DXImageTransform.Microsoft) la seule écriture possible pour désigner une couleur est le format hexadécimal.
En hexadécimal, par rapport au RVG, revient à écrire la couleur sous la forme #RRGGBB.
Il est possible dans ce contexte de rajouter le canal Alpha en faisant précéder la composante Red par ce fameux canal. Ce qui donne la syntaxe suivante :
#AARRGGBB ; avec FF pour opaque et 00 pour transparence totale.

Bonne journée