Heim >Web-Frontend >HTML-Tutorial >CSS如何实现图片灰色和原来色彩切换_html/css_WEB-ITnose
CSS如何实现图片灰色和原来色彩切换_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:381719Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：点击一下 锁住其他内容，JqueryUI有这个功能吗？_html/css_WEB-ITnoseNächster Artikel：Bootstrap 轮播加上css3动画，炫酷到底！_html/css_WEB-ITnose