css 跨浏览器图像灰度

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 跨浏览器图像灰度相关的知识，希望对你有一定的参考价值。

$('img').hover(function(){
    $(this).toggleClass("grayscale")
    //alert('hello');
});

<div><a href="http://www.flickr.com/photos/thecrowleys/8464961316/" title="Forth Road bridge by SparklyOne, on Flickr"><img class="grayscale" src="http://farm9.staticflickr.com/8380/8464961316_bff336e8b1.jpg" width="480" height="246" alt="Forth Road bridge"></a></div>

body{
    padding: 50px 10px;
}
img{
    border: 10px solid #ccc;
    box-shadow: 0px 0px 1px #555;
}
img.grayscale{
    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 */
    -webkit-filter: grayscale(100%);
    
}

以上是关于css 跨浏览器图像灰度的主要内容，如果未能解决你的问题，请参考以下文章