filter(css滤镜)
来源：互联网 发布：程序员面试指南 左程云 编辑：程序博客网 时间：2024/05/16 08:37
<!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滤镜)</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="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Alpha(style=2)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Blur(add=0,direction=90,strength=20)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Chroma(color=#08B218)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Dropshadow(color=#FF3300,offX=5,offY=5,positive=1)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:FlipV"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Glow(color=#33FF33,strength=10)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Gray"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Invert"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Mask(color=#ff0000)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:shadow(color=red,direction=135)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Wave(add=0,freq=3,strength=10,lightstrength=20,phase=50)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,finishY=50)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Alpha(style=1,opacity=70,finishopacity=20,startX=0,startY=0,finishX=50,finishY=50)"></td>
</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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:blur(add=1,direction=270,strength=20)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:DropShadow(color=lightgreen,offX=5px,offY=5px,positive=1)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:FlipH"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Glow(color=yellow,strength=10)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Shadow(color=green)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Wave(add=0,freq=5,strength=20,lightstrength=30,phase=50)"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" 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="http://www.zicp.com/cne/html/images/zicp.jpg"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Gray"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Invert"></td>
<td>
<img src="http://www.zicp.com/cne/html/images/zicp.jpg" style="filter:Xray"></td>
</tr>
</table>
</div>
</body>
</html>
- CSS滤镜(filter)详解
- CSS滤镜filter详解
- CSS滤镜filter详解
- 精通CSS滤镜(FILTER)
- filter(css滤镜)
- filter：css滤镜语法
- css 滤镜 filter
- css filter滤镜讲解
- CSS 滤镜 filter:alpha
- CSS filter滤镜
- CSS filter滤镜属性
- CSS- filter滤镜设置
- CSS filter滤镜的用法
- 精通CSS滤镜(FILTER)[转]
- CSS滤镜filter切换图片
- CSS filter滤镜的用法
- CSS filter滤镜的用法
- CSS filter滤镜的用法
- windos程序崩溃定位1
- Ruby 字符串
- 查询月末余额不足一百的客户信息
- 我们为什么做不好软件项目？做项目时间都浪费在反复奸奸杀杀，杀杀奸奸上了
- CSS用滤镜打造的椭圆型导航菜单
- filter(css滤镜)
- 预处理指令
- Boost库的编译(转)
- 努力请从今日始~
- jQuery冲突问题
- Android for X86 截图预览
- 软件项目 三层架构
- 太晚睡觉等于自杀（献给年轻人）（一定要看看，以后不熬夜了！）
- ASP:用ADO连接数据库的三种方法及其性能比较
