跨浏览器图片变成黑白CSS代码

跨浏览器图片变成黑白CSS代码

有时候想将网站的图片变成黑白的,在不同的浏览器例如Firefox,filter:gray;就不太好使。好在还有人想出了更加完美的兼容不同浏览器的方法。将所有的图片变成黑白色:

img.grayscale {
    filter: url("data:image/svg xml;utf8,<svg xmlns=\'https://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%); /* Chrome 19 , Safari 6 , Safari 6  iOS */
}

恢复到先前的彩色:

img.grayscale.disabled {
    filter: url("data:image/svg xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

原始文章参考:Cross-Browser Image Grayscale with CSS


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/css-for-black-and-white-images-cross-browsers/

暂无评论