Filter grey pour ie10/11

Bonsoir à tous,

Bon, ie continue à être le browser le plus décevant du monde...
Maintenant c'est filter grey qui ne fonctionne plus !

Existe-t-il une solution pour rendre une image en niveau de gris avec internet explorer.

Merci

Oui, c'est super simple.

Mais comme tu préfères troller à propos d'IE que montrer ton code et préciser la ou les versions d'IE qui posent problème je vais te laisser chercher la solution tout seul.

Bon...
On va pas polémiquer...

ie11

mixin en sass

@mixin grey-filter($value) {
		-webkit-filter: grayscale($value);
		-moz-filter: grayscale($value);
		-o-filter: grayscale($value);
		-ms-filter: grayscale($value);
		filter: grayscale($value);
		filter: gray;
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

.encart-image{
	a{
		display:block;
		width:100%;
		height:100%;
		.porte-image{
			background-size:cover;
			background-repeat: none;
			@include grey-filter(100%);
			height:100%;
			width:100%;
		}	
		&:hover{
			.porte-image{
				@include grey-filter(0%);
				transform: scale(1.05);
			}
		}
	}

}

NB le code du mixin est à optimiser en mettant une condition sur la valeur...


le html (avec l'image)

<div class="encart position-11 encart-image">
	<a href="#" title="">
		<div class="info-lien droite">Voir nos réalisations</div>
		<div class="porte-image" style="background-image:url('<?php echo THEMEROOT; ?>/images/maquette/40.jpg');"></div>
	</a>
</div>

Modifié par Heillige Leben (07 Mar 2015 - 23:05)

hop,

http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
par exemple.

Au passage:


-webkit-filter: grayscale($value);
-moz-filter: grayscale($value); <--N'a jamais existé et n'existera pas
-o-filter: grayscale($value); <--N'a jamais existé et n'existera pas
-ms-filter: grayscale($value); <--N'a jamais existé et n'existera pas
filter: grayscale($value);
filter: gray; IE 6-9
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); IE 5.5, vraiment???


Quant à Firefox, il ne supporte filter: grayscale(x%); que depuis la version actuelle (35). Pour les versions antérieures, il faut aussi passer par une bricole sur du svg.

p.s. : Le filtre grayscale, ça se dégrade assez gracieusement.
Modifié par kustolovic (08 Mar 2015 - 01:59)

Merci pour ta vraie réponse.

J'avais vu la possibilité d'utiliser les filters svg.
Mais le problème alors c'est que je place l'image en background pour utiliser la propriété cover.
Du coup je ne sais pas comment faire que l'image à l'intérieur du svg reproduise le même comportement ...
En javascript d'accord... mais il n'y a pas une autre méthode pour ne pas alourdir le code pour pas grand chose..?

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); IE 5.5, vraiment???

Par désespoir

Rhoo toujours aussi aimable sur ce forum .. Merci sérieux?

Hop direction Stack Overflow donc, avec des vraies réponses à l'intérieur et des liens en référence (toujours utile hein, bon pour la croissance) > "internet explorer 10 - howto apply grayscale filter?"

Et un ptit bisous au passage ça fait du bien un peu de tendresse