CSS滤镜修饰网页图片显示出的不同效果

发布时间：2018-09-15 00:23:24 所属栏目：专访来源：站长网

导读：CSS滤镜修饰网页图片显示出的不同效果，图在不同的CSS滤镜作用下，呈现出不同的效果。。。其实CSS的此项功能非常实用，用它可以生成出灰度图、底片效果、X光效果等，实例仅列出了一小部分，还有不少的图片效果可以用CSS滤镜来完成。演示： htmlheadtitle

　　CSS滤镜修饰网页图片显示出的不同效果，图在不同的CSS滤镜作用下，呈现出不同的效果。。。其实CSS的此项功能非常实用，用它可以生成出灰度图、底片效果、X光效果等，实例仅列出了一小部分，还有不少的图片效果可以用CSS滤镜来完成。

　　演示：

<html> <head> <title>不同的滤镜作用下，呈现出不同的效果</title> <style>  .30pt{font-size:50pt;color:#cc0099} </style> </head> <body> <center> <font class=30pt><br>图在不同的滤镜作用下，呈现出不同的效果。。。<br><br></font> <table border=1> <tbody> <tr> <td align=center>正常图片 <td align=center>灰度图 <td align=center>底片效果 <td align=center>x光效果 <tr> <td ><img height=150 weight=200 src="/uploads/common/images/p6.jpg"></td> <td ><img style="filter: gray" height="150" weight="200" src="/uploads/common/images/p6.jpg"></td> <td ><img style="filter: invert" height="150" weight="200" src="/uploads/common/images/p6.jpg"></td> <td ><img style="filter: xray" height="150" weight="200" alt="x光效果" src="/uploads/common/images/p6.jpg" width="180"></td> </tr> </tbody> </table> </center> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：广州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!