CSDN博客

img 21aspnet

话说CSS滤镜

发表于2004/11/4 10:12:00  1608人阅读

分类: HTML

作者: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 移动效果 移动效果 移动效果 移动效果 移动效果 移动效果

使用Blur.css的方法

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 固定影子 固定影子 固定影子 固定影子 固定影子 固定影子

使用DropShadow.css的方法

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
光辉 光辉 光辉 光辉 光辉 光辉

 

使用Glow.css的方法

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"

 

使用Gray.css的方法

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"

使用Invert.css的方法

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)"

 

使用Mask.css的方法

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 固定影子

 

使用Shadow.css的方法

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 波纹效果 波纹效果 波纹效果 波纹效果 波纹效果 波纹效果

 

使用Wave.css的方法

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"

 

使用Xray.css的方法

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">
结果为:

变化前 变化后
阅读全文
0 0

相关文章推荐

img
取 消
img