CSS滤镜示范(filter)附源代码(静态滤镜)

作者：cchxp 来源：经典论坛时间：2008-05-18 12:42:00　

浏览器：IE ，不支持firefox

filter视觉滤镜的种类:

Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) DropShadow(不透明阴影) FlipH&FlipV(翻转) Glow(边缘光晕) Gray(去色) Invert(底片效果) Mask(遮照效果) filter:Shadow(影子) Wave(波浪)

推荐下载：苏沈小雨css样式表滤镜中文手册

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>filter(css滤镜) - asp之家</title><style type="text/css">body { margin: 0px; padding: 0px;}table { font-size: 12px; border: 1px solid #0000FF;}tr,td { padding: 0px; border: 1px solid #0000FF;}</style><script language="JavaScript"></script></head><body><strong>filter视觉滤镜的种类</strong><div><table> <tr> <td width=80>Alpha(透明度)</td> <td width=80>Blur(模糊)</td> <td width=80>Chroma(指定颜色透明)</td> <td width=80>DropShadow(不透明阴影)</td> <td width=80>FlipH&FlipV(翻转)</td> <td width=80>Glow(边缘光晕)</td> <td width=80>Gray(去色)</td> <td width=80>Invert(底片效果)</td> <td width=80>Mask(遮照效果)</td> <td width=80>filter:Shadow(影子)</td> <td width=80>Wave(波浪)</td> <td width=80>Xray(轮廓加亮)</td> </tr> <tr> <td height=140><img src=https://www.aspxhome.com/images/logo.gif style="filter:Alpha(style=2)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Blur(add=0,direction=90,strength=20)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Chroma(color=#08B218)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Dropshadow(color=#FF3300,offX=5,offY=5,positive=1)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:FlipV"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Glow(color=#33FF33,strength=10)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Gray"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Invert"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Mask(color=#0000FF)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:shadow(color=red,direction=135)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Wave(add=0,freq=3,strength=10,lightstrength=20,phase=50)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Xray"></td> </tr></table></div><br><strong>Alpha:</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>开始透明度(opacity):100<br>结束透明度(finishopacity):0<br>开始位置(startX,startY):(0,0)<br>结束位置(finishX,finishY):(50,50)</td> <td width=200>开始透明度(opacity):70<br>结束透明度(finishopacity):20<br>开始位置(startX,startY):(0,0)<br>结束位置(finishX,finishY):(50,50)</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,finishY=50)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Alpha(style=1,opacity=70,finishopacity=20,startX=0,startY=0,finishX=50,finishY=50)")</td> </tr></table></div><br><strong>Blur:</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>显示原来的图片，且以270度的方向模糊20px</td> <td width=200>不显示原来的图片，且以90度方向模糊20px</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:blur(add=1,direction=270,strength=20)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:blur(add=0,direction=90,strength=20)"></td> </tr></table></div><br><strong>Chroma</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>Chroma指定的字体颜色(我是CCHXP)变为透明</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Chroma(color=#08B218)"></td> </tr></table></div><br><strong>DropShadow</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>设置阴影颜色为淡绿色，往右移5px，往下移5px，且阴影呈不透明的效果。</td> <td width=200>设置阴影颜色为粉红色，往左移5px，往上移5px，且阴影呈不透明的效果。</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:DropShadow(color=lightgreen,offX=5px,offY=5px,positive=1)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:DropShadow(color=pink,offX=-5,offY=-5,positive=1)"></td> </tr></table></div><br><strong>FlipH&FlipV</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>设置图片水平翻转FlipH</td> <td width=200>设置图片垂直翻转FlipV</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:FlipH"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:FlipV"></td> </tr></table></div><br><strong>Glow</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>设置图片光晕颜色为黄色，强度为10</td> <td width=200>设置图片光晕颜色为红色，强度为20</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Glow(color=yellow,strength=10)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Glow(color=pink,strength=20)"></td> </tr></table></div><strong>Gray</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>将图片的颜色去除，以达到灰色效果</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Gray"></td> </tr></table></div><strong>Invert</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>设置图片颜色呈底片效果</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Invert"></td> </tr></table></div><strong>Mask</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>设置图片的屏蔽颜色为蓝色</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Mask(color=#0000FF)"></td> </tr></table></div><strong>Shadow</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>设置图片阴影颜色为绿色，往225度方向</td> <td width=200>设置图片阴影颜色为红色，往135度方向</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Shadow(color=green)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Shadow(color=red)"></td> </tr></table></div><strong>Wave</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>不显示原始图片，有5个振幅为20象素的波浪，其光的强度为30，波浪其始位置为50</td> <td width=200>显示原始图片，有3个振幅为50象素的波浪，其光的强度为50，波浪起始位置为100</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Wave(add=0,freq=5,strength=20,lightstrength=30,phase=50)"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)"></td> </tr></table></div><strong>Xray</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>X光照片的效果</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Xray"></td> </tr></table></div><strong>Gray&Invert&Xray比较</strong><div><table> <tr> <td width=200>原始图片</td> <td width=200>Gray效果</td> <td width=200>Invert效果</td> <td width=200>Xray效果</td> </tr> <tr> <td><img src=https://www.aspxhome.com/images/logo.gif></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Gray"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Invert"></td> <td><img src=https://www.aspxhome.com/images/logo.gif style="filter:Xray"></td> </tr></table></div></body></html>

标签：滤镜,filter,css

投稿

CSS滤镜示范(filter)附源代码(静态滤镜)

猜你喜欢

详解如何创建Python元类

python使用rsa非对称加密过程解析

vue中element-ui组件默认css样式修改的四种方式

python日志logging模块使用方法分析

海量数据库的查询优化及分页算法方案集合2/2

如何正确编写高质量高性能的MySQL语法

django框架两个使用模板实例

anaconda安装后打不开解决方式(亲测有效)

Python使用psutil获取进程信息的例子

Python pandas的八个生命周期总结

Python编程实现控制cmd命令行显示颜色的方法示例

pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法

opencv+mediapipe实现人脸检测及摄像头实时示例

解决缩小图标变样问题

Mysql中日期和时间函数介绍

Python astype(np.float)函数使用方法解析

Python脚本导出为exe程序的方法

Python自然语言处理之切分算法详解

对Server.UrlEncode进行字符反编译

Python 概率生成问题案例详解