Home > Article > Web Front-end > CSS如何实现图片灰色和原来色彩切换_html/css_WEB-ITnose
CSS如何实现图片灰色和原来色彩切换_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:381700browse
CSS如何实现图片灰色和原色切换:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
有些网站效果比较绚丽，就是当鼠标放在图片上的时候，图片可能会有灰色和原来色彩的切换。下面简单介绍一下如何实现此效果。
代码实例:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> a img{ border:0px; filter:gray; } a:hover img{ border:0px; filter: } </style> </head> <body> <a href="#"><img src="mytest/demo/yinying.jpg" alt="CSS如何实现图片灰色和原来色彩切换_html/css_WEB-ITnose" ></a> </body> </html> 以上代码很简单，就是filter属性集合超链接伪类一起实现的。不过很遗憾，filter属性只有IE浏览器支持。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4691
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：点击一下 锁住其他内容，JqueryUI有这个功能吗？_html/css_WEB-ITnoseNext article：Bootstrap 轮播加上css3动画，炫酷到底！_html/css_WEB-ITnose