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 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 | 移动效果 |
使用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"
|
|
|
| 原图 | 处理后的图 |
| Glow 在对象的外边缘加光辉 |
语法：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">
结果为：
|
|
|
| 变化前 | 变化后 |
| Shadow 创建偏移固定影子 |
语法：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>
结果为：
固定影子
| Wave 创建波纹效果 |
语法：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 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 | 波纹效果 |
本文地址：http://www.45fan.com/a/question/66963.html