Chrome 谷歌浏览器 Firefox火狐浏览器 IE CSS中filter滤镜灰度gary实现

来源:智多PC网 作者:e时代无名 更新时间:2016-06-19 23:12 点击:
今天写模板想通过CSS实现,默认图片灰色鼠标经过变彩色(CSS滤镜灰度),结果发现简单的只支持IE浏览器,很让我失望,结果我就到处找方法,后来在我的多番折腾之下完美实现了Chrome谷歌浏览器、IE浏览器、CSS中 fiter 滤镜灰度gray实现成功加上火狐Firefox鼠
今天写模板想通过CSS实现,默认图片灰色鼠标经过变彩色(CSS滤镜灰度),结果发现简单的只支持IE浏览器,很让我失望,结果我就到处找方法,后来在我的多番折腾之下完美实现了Chrome谷歌浏览器、Firefox火狐浏览、IE浏览器、CSS中filter滤镜灰度gray实现成功,并且加上透明,现在整理出来分享给大家!
CSS代码如下:
a:link img {
	/*chrome谷歌浏览器filter灰度实现*/
	-webkit-filter: grayscale(100%);
	/*Firefox火狐浏览器filter灰度实现*/
    filter: grayscale(100%);
	/*IE浏览器filter灰度实现*/
	filter: gray;	
}
a:hover img {
	/*IE浏览器filter灰度清除*/
	filter: "";
	/*chrome谷歌浏览器filter灰度清除*/
	-webkit-filter: grayscale(0%);
	/*CSS滤镜透明*/
	opacity: 0.7;
	/*Firefox火狐浏览器filter灰度清除*/
	filter: grayscale(0%);
}


根据自身情况修改,局部实现可以定位到class或者ID

本文属于智多PC网原创文章,转载请注明出处:http://www.zhiduopc.com.cn/web/css/7936.html
  • [智多PC网]刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
0
0

文章评论