Niveaux de gris Css Images
J'ai fait beaucoup de recherches sur le Web, mais je ne trouve pas de solution multi-navigateurs pour fondre une image css en arrière-plan en niveaux de gris et inversement.
La seule solution qui fonctionne consiste à appliquer le filtre CSS3 en niveaux de gris:
-webkit-filter: grayscale(100%);
mais cela fonctionne uniquement avec Chrome v.15 + et Safari v.6 + (comme vous pouvez le voir ici: http://css3.bradshawenterprises.com/filters/ =)
De nombreuses pages en ligne parlent de cette solution pour griser les éléments:
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
(comme vous pouvez le voir ici: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )
Mais en réalité, cela ne semble pas fonctionner pour les images de fond css, comme le fait le filtre webkit.
Existe-t-il une solution (peut-être avec jQuery?) Pour pirater ce manque de prise en charge des filtres sur les navigateurs moins avancés?
Voici:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 600px;
height: 600px;
float: left;
color: white;
}
.grayscale {
background: url(yourimagehere.jpg);
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.nongrayscale {
background: url(yourimagehere.jpg);
}
</style>
</head>
<body>
<div class="nongrayscale">
this is a non-grayscale of the bg image
</div>
<div class="grayscale">
this is a grayscale of the bg image
</div>
</body>
</html>
Testé dans FireFox, Chrome et IE. J'ai également joint une image pour montrer les résultats de mon implémentation.
EDIT: En outre, si vous souhaitez que l'image bascule avec jQuery, voici la source de la page pour cela ... J'ai inclus le lien Web vers jQuery et l'image en ligne afin que vous devrait juste être capable de copier/coller pour le tester:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 600px;
height: 600px;
float: left;
color: white;
}
.grayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.nongrayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#image").mouseover(function () {
$(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);
});
$("#image").mouseout(function () {
$(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
});
});
</script>
</head>
<body>
<div id="image" class="nongrayscale">
rollover this image to toggle grayscale
</div>
</body>
</html>
EDIT 2 (pour les utilisateurs d'IE10-11): La solution ci-dessus ne fonctionnera pas avec les modifications apportées récemment par Microsoft au navigateur. Voici donc une solution mise à jour qui vous permettra de mettre à l'échelle grise (ou de désaturer). ) vos images.
<svg>
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
<image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg>En utilisant les navigateurs actuels, vous pouvez l’utiliser comme ceci:
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
et pour y remédier:
img:hover{
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
travaillé avec moi et est beaucoup plus courte. Il y a encore plus à faire dans le CSS:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Pour plus d'informations et les navigateurs associés, voir ceci: http://www.w3schools.com/cssref/css3_pr_filter.asp
Je sais que la question est très ancienne, mais que c'est le premier résultat sur duckduckgo, je voulais donc partager ce que je pense être une solution meilleure et plus moderne.
Vous pouvez utiliser background-blend-mode propriété pour obtenir une image en niveaux de gris:
#something {
background-color: #fff;
background-image: url("yourimage");
background-blend-mode: luminosity;
}
Si vous voulez supprimer l'effet, changez simplement le mode de fusion en initial.
Vous devrez peut-être jouer un peu avec la couleur de fond si cet élément recouvre quelque chose avec un fond. Ce que j'ai trouvé, c'est que l'échelle de gris ne dépend pas de la couleur réelle mais de la valeur alpha. Donc, si vous avez un arrière-plan bleu sur le parent, définissez le même arrière-plan sur #something.
Vous pouvez également utiliser deux images, l’une avec la couleur et l’autre sans, et définir l’arrière-plan et les autres modes de fusion.
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
Cela ne fonctionnera pas sur Edge cependant.
EDIT: La partie "fondu" de la question me manque.
Si vous ne voulez pas que le fondu passe en/en niveaux de gris, vous pouvez utiliser une transition CSS sur la couleur de fond pour changer sa valeur alpha:
#something {
background-color: rgba(255,255,255,1);
background-image: url("yourimage");
background-blend-mode: luminosity;
transition: background-color 1s ease-out;
}
#something:hover {
background-color: rgba(255,255,255,0);
}
J'ajoute aussi un exemple de code pour la complétude https://codepen.io/anon/pen/OBKKVZ