多种CSS图片滤镜效果的实现代码,每一个效果都用一张图片加以演示,有阴影、水英灰度、透明度、反相、蓝色等效果,在平时我们写网页特效的时候,这些效果是非常常见的。看来CSS的Filter功能相当强大,如果您还不是太了解CSS,或者想学习CSS,请阅读烈火网提供的CSS手册。 演示效果: <html> <head> <title>图片的滤镜特效 - Liehuo.Net</title> <style> div { width:180; height:140; } </style> </head> <body> <hr> <table border="1"> <tr><td><div style="filter:alpha(Opacity=50)"> <img src="http://www.veryhuo.com/uploads/common/images/Liehuo_833829.jpg" width="160" height="120"></div> </td><td><div style="filter:gray()"> <img src="http://www.veryhuo.com/uploads/common/images/Liehuo_847143.jpg" width="160" height="120"></div> </td><td><div style="filter:blur(strength=80)"> <img src="http://www.veryhuo.com/uploads/common/images/Liehuo_847143.jpg" width="160" height="120"></div> </td></tr> <tr><td>Alpha</td><td>Gray</td><td>Blur</td></tr> <tr><td><div style="filter:invert()"> <img src="http://www.veryhuo.com/uploads/common/images/Liehuo_833829.jpg" width="160" height="120"></div> </td><td><div style="filter:xray()"> <img src="http://www.veryhuo.com/uploads/common/images/Liehuo_847143.jpg" width="160" height="120"></div> </td><td><div style="filter: progid:DXImageTransform.Microsoft.engrave() progid:DXImageTransform.Microsoft.dropshadow(color='black',OffX=3,OffY=2"> <img src="http://www.veryhuo.com/uploads/common/images/Liehuo_847143.jpg" width="160" height="120"></div> </td></tr> <tr><td>Invert</td><td>Xray</td><td>Engrave+DropShadow</td</tr> </table> </body> </html> <br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 JavaScript滤镜控制功能的特效代码图片放大镜代码,JavaScript结合Css完成的特效