将彩色图片转换为黑白

最新推荐文章于 2022-10-11 11:23:22 发布

土豆南瓜

最新推荐文章于 2022-10-11 11:23:22 发布

阅读量190

点赞数

分类专栏： javascript css

本文链接：https://blog.csdn.net/cat2008robocode1314/article/details/84478208

版权

javascript css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

不同的浏览器将彩色图片显示为黑白图片的css，这里采用css filter

firefox

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><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");
}
img:hover{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><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");
}

img{ 
   
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);    
    filter: grayscale(100%);	
    filter: gray;
}
img:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);    
    filter: grayscale(0);	
}

2. 根据不同的浏览器加载不同CSS

<script>
if(window.navigator.userAgent.indexOf("MSIE")>=1){
  //如果浏览器为IE
  setActiveStyleSheet("style_ie.css");
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1 ){
  //如果浏览器为Firefox
  alert("fire");
  setActiveStyleSheet("style_fire.css");
}
else{
  //如果浏览器为其它
  setActiveStyleSheet("style_ie.css");
}
   
 function setActiveStyleSheet(filename){ 
  document.write("<link href=\".\/cs\/"+filename+"\" type=\"text\/css\" rel=\"stylesheet\">");
}
</script>

后记：

可以直接通过CSS实现，经过测试在firefox上是好使的，IE上不知道为什么，变不回彩色了。

	<style type="text/css">
	img{ 
   
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);    
    filter: grayscale(100%);	
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><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");
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
	img:hover{
		-webkit-filter: grayscale(0);
		-moz-filter: grayscale(0);
		-ms-filter: grayscale(0);
		-o-filter: grayscale(0);    
		filter: grayscale(0);	
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><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");
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
	}
	</style>