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

发布时间：2018-10-30 16:27:22 所属栏目：访谈来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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