话说CSS滤镜
作者:http://www.swtv.com.cn/adjunct/nr/css/css.htm Alpha 透明层次: 滤镜效果 | |
语法:STYLE="filter:filtername(parameter1,parameter2,parameter3...)" 其中:filtername为滤镜的名称;parameter1,parameter2等为滤镜的参数。 | |
滤镜名称及功能说明: |
语法:STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StarX=starX,Stary=STARy,
FinishX=finishX,FinishY=finishY)"
其中:Opacity 为起始值,取值为0-100,0为透明,100为原图;FinishOpacity 为目标值; 取值为0-3;StarX或Stary 为任意值。
例子如下:
FinishOpacity=100 | ||||
参数 | Style=3 | Style=2 | Style=1 | Style=0 |
Opacity=100 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=50 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=20 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=0 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
FinishOpacity=50 | ||||
参数 | Style=3 | Style=2 | Style=1 | Style=0 |
Opacity=100 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=50 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=20 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=0 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
FinishOpacity=20 | ||||
参数 | Style=3 | Style=2 | Style=1 | Style=0 |
Opacity=100 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=50 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=20 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=0 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
FinishOpacity=0 | ||||
参数 | Style=3 | Style=2 | Style=1 | Style=0 |
Opacity=100 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=50 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=20 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Opacity=0 | 设置透明层次 | 设置透明层次 | 设置透明层次 | 设置透明层次 |
Blur 创建高速度移动效果,既模糊效果 |
语法:STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
其中:Add 是否保留原效果,取值为0 or 1;Direction 为移动角度值,取值为0-315度,步长45度;Strength效果长度值,一般取5即可。
举例如下:
Direction= 0 | Strength=0 | Strength=5 | Strength=10 | Strength=20 | Strength=50 | Strength=100 |
Add=0 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 |
Add=1 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 |
Direction=90 | Strength=0 | Strength=5 | Strength=10 | Strength=20 | Strength=50 | Strength=100 |
Add=0 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 |
Add=1 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 |
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Blur { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Blur(Add=1,Direction=45,Strength=5) | 滤镜内容仅此一行。这里定义高速度移动效果。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Blur.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Blur.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="Blur">高速度移动效果</td></tr>
</Table>
或者
<span class="Blur">高速度移动效果</span>
结果为:
高速度移动效果
Chroma 使某种颜色透明:
Chroma 制作专用颜色透明 |
Chroma 制作专用颜色透明 |
语法:STYLE="filter:Chroma(Color=color)"
其中:Color=#rrggbb,任意。
例子:STYLE="filter:Chroma(Color=#FFFF00)" 让黄色透明。
DropShadow 创建对象的固定影子 |
语法:STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
其中:Color=#rrggbb,任意;OffX或OffY 分别为X或Y轴的偏离值;Positive 取值为0 or 1。
举例如下:
Positive=0 | OffY=-10 | OffY=-5 | OffY=0 | OffY=5 | OffY=10 | OffY=15 |
OffX=-10 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=-5 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=0 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=5 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=10 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=15 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
Positive=1 | OffY=-10 | OffY=-5 | OffY=0 | OffY=5 | OffY=10 | OffY=15 |
OffX=-10 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=-5 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=0 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=5 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=10 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
OffX=15 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 | 固定影子 |
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
DropShadow { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : DropShadow(Color=#6699cc,OffX=5,OffY=5,Positive=1) | 滤镜内容仅此一行。这里定义固定影子。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用DropShadow.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="DropShadow.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="DropShadow">固定影子</td></tr>
</Table>
或者
<span class="DropShadow">固定影子</span>
结果为:
固定影子
FlipH 创建水平镜像图片 |
FlipH 创建水平镜像图片 |
语法:STYLE="filter:FlipH"
例子:STYLE="filter:FlipH"
![]() |
![]() |
原图 | 处理后的图 |
FlipV 创建垂直镜像图片 |
FlipV 创建垂直镜像图片 |
语法:STYLE="filter:FlipV"
例子:STYLE="filter:FlipV"
![]() |
![]() |
原图 | 处理后的图 |
语法:STYLE="filter:Glow(Color=color,Strength=strength)"
其中:Color=#rrggbb,发光颜色,任意;Strength 为发光强度,取值为0-100。
举例如下:
Strength=0 | Strength=5 | Strength=10 | Strength=20 | Strength=50 | Strength=100 |
光辉 | 光辉 | 光辉 | 光辉 | 光辉 | 光辉 |
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Glow { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Glow(Color=#FF0000,strength=4) | 滤镜内容仅此一行。这里定义光辉颜色为红色,发光强度为4。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Glow.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="glow.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="glow">在对象的外边缘加光辉</td></tr>
</Table>
或者
<span class="glow">在对象的外边缘加光辉</span>
结果为:
在对象的外边缘加光辉
Gray 把图片/文字灰度化 |
Gray 把图片/文字灰度化 |
语法:STYLE="filter:Gray"
例子:STYLE="filter:Gray"
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Gray { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Gray | 滤镜内容仅此一行。这里定义灰度。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Gray.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Gray.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td ><img class="Gray" src="图片"></td></tr>
</Table>
或者
<Table><tr>
<td class="Gray">把图片/文字灰度化</td></tr>
</Table>
或者
<img class="Gray" src="图片">
或者
<span class="Gray">把图片/文字灰度化</span>
结果为:
![]() |
![]() |
处理前 | 处理后 |
Invert 反色 |
Invert 反色 |
语法:STYLE="filter:Invert"
例子:STYLE="filter:Invert"
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Invert { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Invert | 滤镜内容仅此一行。这里定义反色。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Invert.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Invert.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td ><img class="Invert" src="图片"></td></tr>
</Table>
或者
<Table><tr>
<td class="Invert">反色</td></tr>
</Table>
或者
<img class="Invert" src="图片">
或者
<span class="Invert">反色</span>
结果为:
![]() |
![]() |
处理前 | 处理后 |
Mask 创建透明遮掩膜在对象上 |
Mask 创建透明遮掩膜在对象上 |
语法:STYLE="filter:Mask(Color=color)"
其中:Color=#rrggbb,任意。
例子:STYLE="filter:Mask(Color=#ffffe0)"
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Mask { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Mask(Color=#ffffe0) | 滤镜内容仅此一行。这里定义透明遮掩膜。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Mask.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Mask.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="Mask">透明遮掩膜</td></tr>
</Table>
或者
<span class="Mask">透明遮掩膜</span>
或者
<img src="图片" class="Mask">
结果为:
![]() |
![]() |
变化前 | 变化后 |
语法:STYLE="filter:Shadow(Color=color,Direction=direction)"
其中:Color=#rrggbb,任意;Direction 为角度值,取值为0-315度,步长45度。
举例如下:
Direction=45 | 固定影子 |
Direction=315 | 固定影子 |
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Shadow { font-family : "Comic Sans MS"; | ||
color : #00ff00; | 定义字体颜色。字体为绿色。 | |
line-height :19pt; | 定义行高 | |
filter : Shadow(Color=#6699cc,Direction=135) | 滤镜内容仅此一行。这里定义固定影子。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Shadow.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Shadow.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="Shadow">固定影子</td></tr>
</Table>
或者
<span class="Shadow">固定影子</span>
结果为:
固定影子
语法:STYLE="filter:Wave(Add=add,Freq=freq,LightStrength=lightstrength,Phase=phase,Strength=strength)"
其中:Add取值为0 or 1;Freq变形值;LightStrength变形百分比;Phase 角度变形百分比;Strength变形强度。
举例如下:
变形百分比对比
Strength=2 Freq=5 Phase=无 |
LightStrength=0 | LightStrength=5 | LightStrength=10 | LightStrength=20 | LightStrength=50 | LightStrength=100 |
Add=0 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
Add=1 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
角度变形百分比对比
Strength=2 Freq=5 LightStrength=无 |
Phase=0 | Phase=5 | Phase=10 | Phase=20 | Phase=50 | Phase=100 |
Add=0 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
Add=1 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
变形强度对比
Freq=5 LightStrength=5 Phase=4 |
Strength=0 | Strength=5 | Strength=10 | Strength=20 | Strength=50 | Strength=100 |
Add=0 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
Add=1 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
变形值对比
LightStrength=5 Phase=4 Strength=2 |
Freq=0 | Freq=5 | Freq=10 | Freq=20 | Freq=50 | Freq=100 |
Add=0 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
Add=1 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Wave { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Wave(Add=0,Freq=5,LightStrength=5,Phase=4,Strength=2) | 滤镜内容仅此一行。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Wave.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Wave.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="Wave">波纹效果</td></tr>
</Table>
或者
<span class="Wave">波纹效果</span>
或者
<img src="图形" class="Wave">
结果为:
![]() |
![]() |
变化前 | 变化后 |
Xray 使对象变的像被X光照射一样 |
Xray 使对象变的像被X光照射一样 |
语法:STYLE="filter:Xray"
例子:STYLE="filter:Xray"
1、首先在文本编辑器中输入以下内容: | ||
内容 | 注释(不必输入) | |
Xray { font-family : "Comic Sans MS"; | ||
color : #ffff00; | 定义字体颜色。字体为黄色。 | |
line-height :19pt; | 定义行高 | |
filter : Xray | 滤镜内容仅此一行。这里定义X光照射。 | |
font-size : large; | 定义字体大小。这里为大字体。 | |
font-weight : bold; | 定义字体重量。这里为粗体。 | |
width : auto; | ||
height : auto; | ||
position : relative; | ||
padding : 3pt; | ||
} |
2、存盘:
用Xray.css存盘。
3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上:
<LINK REL="stylesheet" Type="text/css" HREF="Xray.css">
在主页的<Body></Body>中加上:
<Table><tr>
<td class="Xray">X光照射</td></tr>
</Table>
或者
<span class="Xray">X光照射</span>
或者
<img src="图片" class="Xray">
结果为:
![]() |
![]() |
变化前 | 变化后 |