|
代码学习群简易教程（23）滤镜
本节讲解css的常用滤镜。支持滤镜的浏览器主要有IE浏览器，其它的浏览器也有支持的。
一、滤镜：
滤镜原本起源于照相机的附加设备。摄影的时候，摄像师为了给照出的照片达到某种效果，会在摄像头上加上相应的特殊镜片，这就是滤镜。CSS的滤镜也是为了达到这种特殊效果的。
二、常用滤镜：
glow滤镜：发光效果。也叫光晕滤镜。
Shadow滤镜：投射阴影效果。
Alpha 滤镜:渐变效果，也叫羽化滤镜。
Blur滤镜:模糊效果。
FlipH, FlipV 滤镜：水平翻转效果。
Mask,Light滤镜：模拟光源的投射效果。
Wave 滤镜：波形效果。
DropShadow 滤镜：附加阴影效果。
Gray ,Invert,Xray 这是三种相似效果的滤镜。依次为：灰色效果滤镜、翻转对象的可视化属性效果滤镜、“X”光效果滤镜。
filter: FlipV 滤镜：垂直翻转效果。
progid滤镜：对图片进行透明处理。
三、滤镜应用：
（一）glow滤镜（光晕滤镜）：
对一个对象(例如：文字或者图片)使用“glow”滤镜以后，这个对象的边缘就会产生类似发光的效果，这种效果在PS中做起来都比较麻烦，而用CSS的“glow”滤镜来制作却是非常简单。
光晕滤镜表达式举例：
style="FILTER: glow(color=#000000,strength=5)"
光晕滤镜只有两个参数，一个参数是“color”，是指定“发光的颜色”，可用十六进制的颜色代码来设定，如#FF0000（表示红色）；另一个参数是“strength”，是表示“发光的强度”，可以从1到255之间的任何整数来指定这个发光强度。发光的强度可简单地理解为光芒的长度。
上面表达式中的“颜色”与“发光的强度”都可以修改。
1、glow滤镜文字：
glow滤镜文字有三种设置方法：
（1）用文字标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在文字标签中。
举例如下：
<P align=center><FONT style="FILTER: glow(color=#000000,strength=5); LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微软雅黑; COLOR: rgb(255,255,0); FONT-SIZE: 26pt">欢迎您！加入代码学习群！</FONT></P>
代码解析：
<段落标签 对其方式＝居中对齐><文字标签 css样式＝“滤镜 光晕滤镜（颜色＝红色，强度＝5）；字距：7px；生成框的类型：行内框；字体：微软雅黑；颜色：十进制颜色（黄色）；字号：26pt”>欢迎您！加入代码学习群！<文字尾标签><段落尾标签>
（2）只应用段落标签（或者块区标签），把滤镜样式设置在段落（或者块区标签）标签中。
举例如下：
<P style="FILTER: glow(color=#000000,strength=5); WIDTH: 550px; LETTER-SPACING: 7px; FONT-FAMILY: 微软雅黑; HEIGHT: 100px; COLOR: rgb(255,255,0); FONT-SIZE: 26pt" align=center>欢迎您！加入代码学习群！</P>
代码解析（略）
（3）只应用文字标签，把滤镜样式设置在文字标签中。
举例如下：
<FONT style="FILTER: glow(color=#000000,strength=5); LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微软雅黑; COLOR: rgb(255,255,0); FONT-SIZE: 26pt" align="center">欢迎您！加入代码学习群！</FONT>
代码解析（略）
用上面三种方法设置的滤镜效果基本上是一样的。滤镜的颜色与强度都可以根据自己的喜爱进行修改。
这里要说明的是：如果把滤镜的样式设置在文字标签中，属性：DISPLAY: inline-block;不可省略。省略以后，滤镜效果就显示不出来了。
glow滤镜文字效果见我制作的这篇网页：
2、glow滤镜图片：
glow滤镜图片有三种设置方法：
（1）用图片标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在段落标签（或者块区标签）标签中，并且要设置居中对其的对其方式。图片标签中要设置“外边距”属性。段落标签（或者块区标签）的规格要大于图片的规格（也就是要加上外边距的宽度）。
举例如下：
（2）把滤镜样式设置在表格标签中（也可以设置在表格的列标签中），在单元格内放入图片。
举例如下：
<TABLE style="FILTER: Glow(strength=12,color=#fA7AC9); WIDTH: 410px; BORDER-COLLAPSE: collapse; HEIGHT: 280px" border=0 cellSpacing=0 cellPadding=3 > <TBODY> <TR> <TD><IMG style="MARGIN: 20px; WIDTH: 366px; HEIGHT: 240px" title="春天没来 教你学滤镜" border=0 src=" http://userimage5.360doc.com/14/0705/03/9213609_201407050308550538.jpg"> </TD></TR></TBODY></TABLE> （3）把滤镜样式设置在移动标签中，用移动标签控制图片。
举例如下：
移动标签中设置滤镜样式，效果如下：
其它两种设置方法效果见：
（二）Shadow滤镜：
Shadow滤镜可以在指定的方向建立物体的投影。
Shadow滤镜表达式举例：style="Filter：Shadow（Color=#ff0000，Direction=45）"
在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。其中0度代表垂直向上，然后每45度为一个单位。
上面表达式中的“颜色”与“投影方向”可以修改。颜色也可以应用英语名称颜色。
1、Shadow滤镜文字：
Shadow滤镜文字也有三种设置方法：
（1）用文字标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在文字标签中。
举例如下：
<DIV style="WIDTH: 550px; HEIGHT: 100px" align=center><FONT style="FILTER: shadow(color= #FF0000, direction=45); DISPLAY: inline-block; FONT: 40pt , 宋体,SimSun; HEIGHT: 100px" color=#ffff00>“春天没来”祝福您</FONT></DIV>
（2）只应用段落标签（或者块区标签），把滤镜样式设置在段落（或者块区标签）标签中。
举例如下：
<DIV style="FILTER: shadow(color= #FF0000, direction=135); WIDTH: 550px; FONT: 40pt 宋体,SimSun; HEIGHT: 100px; COLOR: rgb(255,255,0)" align=center>“春天没来”祝福您</DIV>
（3）只应用文字标签，把滤镜样式设置在文字标签中。
举例如下：
<FONT style="FILTER: shadow(color= #FF0000, direction=270); WIDTH: 550px; DISPLAY: inline-block; FONT: 40pt 宋体,SimSun; HEIGHT: 100px; COLOR: rgb(255,255,0)" align="center">“春天没来”祝福您</FONT>
还可以把“阴影方向”替换为“阴影强度”，也可以添加“阴影强度”：
举例如下：
<DIV style="FILTER: shadow(color= #FF0000, direction=225,strength=15); WIDTH: 550px; FONT: 40pt 宋体; HEIGHT: 100px; COLOR: rgb(0,255,0)" align=center>“春天没来”祝福您</DIV>
（4）标签中可添加“斜体”文字样式：
举例如下：
<P style="FILTER: shadow(color=red,direction=45); WIDTH: 600px; FONT: 900 italic 40pt 隶书; COLOR: rgb(9,255,17); font-size-adjust: none; font-stretch: normal">自己动手 丰衣足食</P>
注：这个属性：FONT: 900 italic 40pt 隶书;是文字的综合设置。即：文字的粗细、斜体、字号与字体。
2、Shadow滤镜图片：
Shadow滤镜图片也有三种设置方法：
（1）用图片标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在段落标签（或者块区标签）标签中，并且要设置居中对其的对其方式。图片标签中要设置“外边距”属性。段落标签（或者块区标签）的规格要大于图片的规格（也就是要加上外边距的宽度）。
举例如下：
（2）把滤镜样式设置在表格标签中（也可以设置在表格的列标签中），在单元格内放入图片，图片要设置外边距属性。
举例如下：
（3）把滤镜样式设置在移动标签中，用移动标签控制图片，图片要设置外边距属性。
举例如下：
（三）Alpha 滤镜：网络中的名称很多。可以叫做渐变滤镜、羽化滤镜、虚化滤镜、雾化滤镜等等名称。
“Alpha”滤镜的作用就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。“Alpha”滤镜是比较复杂的一种滤镜。
1、“Alpha”滤镜的属性：
“opacity”：表示起始值，就是开始处的透明度，又称为透明度水准。范围是从0－100，这里的数据，其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。完全透明：就是只能看到背景，而看不到图片本身；完全不透明：就是看不到背景，只能看到图片本身。
“finishopacity”：是一个可选参数（即：属性），如果想要设置渐变的透明效果，就可以使用此参数来指定“结束处的透明度”。范围也是0－100。
“style”：指定了透明区域的样式。其中0代表“无变化”，也就是显示为原图片；1代表“均匀透明”样式，2代表“圆形”样式，3代表“方形”样式。
“StartX”和“StartY”：代表渐变透明效果开始的X坐标与Y坐标。
“FinishX”和“FinishY”：代表渐变透明效果结束的X坐标和Y坐标。
2、“Alpha”滤镜样式举例：
（1）简单的“Alpha”滤镜样式：
style="FILTER: alpha(opacity=100,style=3)"
应用这种滤镜样式，起始值为0时，是完全透明。只能看到背景，看不到图片。
起始值为100时，是由不透明到透明的渐变效果。具体有三种渐变效果：
①当透明区域的样式为1时，是从左到右的由不透明到透明的均匀渐变效果。
②当透明区域的样式为2时，是从中心到周围的由不透明到透明的圆形渐变效果。
③当透明区域的样式为3时，是从中心到周围的由不透明到透明的方形渐变效果。
起始值为其它数值时，是由不同程度的透明到不透明的渐变效果。
这五种羽化图片效果，见我制作的这篇网页：
（2）复杂的“Alpha”滤镜样式举例：
style="filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50, FinishX=0, StartY=0, FinishY=100)"
样式解析：
样式＝“滤镜：羽化滤镜（起始值＝100，结束处的透明度＝0，透明度样式＝均匀羽化，开始处的x坐标＝50，结束处的x坐标＝0,开始处的y坐标＝0，结束处的y坐标＝100）”
☆设置较复杂的羽化图片效果，首先应该设置开始处的透明度与结束处的透明度，然后根据制作的需要，设置x轴与y轴开始处的透明度和结束处的透明度。
所谓羽化哪个部位，就是把哪个部位的图片变得模糊起来，显示出某种程度的背景来。
3、“Alpha”滤镜文字代码举例：
alpha滤镜文字也有三种设置方法：
（1）用文字标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在段落标签中。段落标签中还要设置背景颜色或者背景图片。
举例如下：
<P style="FILTER: alpha(opacity=100,style=3); BACKGROUND-COLOR: #000092; WIDTH: 560px"><FONT style="LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-SIZE: 40pt; FONT-WEIGHT: normal" color=#00ff00 face=华文行楷><B>“春天没来”欢迎您</B></FONT></P>
（2）只应用段落标签（或者块区标签），把滤镜样式设置在段落（或者块区标签）标签中，还要设置背景颜色或者背景图片。
举例如下：
<P style="FILTER: alpha(opacity=100,style=3); LINE-HEIGHT: normal; BACKGROUND-COLOR: #000092; FONT-STYLE: normal; WIDTH: 560px; DISPLAY: inline-block; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; FONT-WEIGHT: normal"><B>“春天没来”欢迎您</B></P>
（3）只应用文字标签，把滤镜样式设置在文字标签中，还要设置背景颜色或者背景图片。DISPLAY: inline-block属性不可省略。
举例如下：
<FONT style="FILTER: alpha(opacity=100,style=3); LINE-HEIGHT: normal; BACKGROUND-COLOR: #000092; FONT-STYLE: normal; WIDTH: 560px; DISPLAY: inline-block; COLOR: rgb(0,250,0); FONT-SIZE: 40pt; FONT-WEIGHT: normal"><B>“春天没来”欢迎您</B></FONT> <DIV align=right><FONT style="FONT-SIZE: 28px" color=#0000ff><STRONG>“春天没来”编撰</STRONG></FONT></DIV> 4、alpha滤镜图片：
alpha滤镜图片有三种设置方法：
（1）用图片标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在图片标签中，段落标签（或者块区标签）要设置背景颜色或者背景图片。
举例如下：
（2）在表格标签中设置背景颜色或者背景图片，把滤镜样式设置在图片标签中。
举例如下：
（3）在移动标签中设置背景颜色或者背景图片，把滤镜样式设置在图片标签中，用移动标签控制图片。
举例如下：
5、alpha滤镜图片设置方法：
（1）设置“开始处”与“结束处”的透明度，设置“羽化区域”样式的渐变效果。
要牢记显示效果：透明度设置为0时，只显示背景，不显示图片；透明度设置为100时，只显示图片，不显示背景。
效果实例：
（2）alpha滤镜的渐变效果，七种属性都设置。
代码举例：
代码简析：
块区标签中设置背景图片或者背景颜色，图片标签中设置滤镜样式（七种属性），用块区标签控制图片。
图片各部位羽化效果：
图片各部位羽化效果，见我制作的这篇网页：
代码简析：
上部羽化代码简析：
设置“起始处”的透明度为“0”，“结束处”的透明度为“100”。表示整个图片由透明渐变为不透明。
设置“透明区域的样式”为“1”，表示均匀透明。均匀透明更容易观察出图片的渐变效果。
x轴的“起始处”坐标与“结束处”的坐标都设置为0，表示图片的宽度均为透明。
y轴的“起始处”坐标设置为0，“结束处”坐标设置为40，表示从图片高度的40％处渐变为不透明。
其它部位羽化代码简析（略），可比照代码，自己试着解析一下。
注意：
因为“Alpha”滤镜的作用是把一个目标元素与背景混合，所以在代码中必须设置背景颜色或者背景图片，而且还要选择合适的背景颜色或者背景图片。
作业：
二、填空：
1、本节重点讲解了三种滤镜：（）滤镜、（）滤镜与（）滤镜。
2、glow滤镜的作用是使对象的边缘产生（）的效果。光晕滤镜只有两个参数：一个是（），是指定（），可用（）的颜色代码来设定，如：（）；另一个参数是（），是表示（），可以从（）之间的任何整数来指定这个（）。发光的强度可简单地理解为（）。
3、glow滤镜因为是在对象的外围添加（）效果的，因此，在制作glow滤镜图片时，容器（例如：段落和表格）的规格一定要（）图片的规格，图片标签中应该设置（）属性。
4、glow滤镜表达式举例：（）
5、Shadow滤镜的作用是在指定的方向建立物体的（）。
6、Shadow滤镜表达式举例：（）
7、Shadow有两个参数值：Color参数用来指定（），Direction参数用来指定（）。其中0度代表（），然后每（）度为一个单位。
8、Alpha滤镜的作用就是把一个（）与（）混合。你可以指定（）来控制混合的程度。这种“与背景混合”，通俗地说就是一个元素的（）。通过指定（），可以指定点、线、面的透明度。
9、Alpha滤镜的简易表达式举例：（）
10、Alpha滤镜的复杂表达式举例：（）
三、试述glow滤镜文字的三种设置方法。
四、试述glow滤镜图片的三种设置方法。
六、试述Shadow滤镜图片的三种设置方法。
七、写出Alpha滤镜的七种属性，并简述各种属性的作用。
八、试述alpha滤镜文字的三种设置方法。
九、试述alpha滤镜图片的三种设置方法。
十、应用本节讲解的三种滤镜各制作一篇文字网页与图片网页。
“春天没来”编撰
2014年7月11日于北京 | 
