代码学习群简易教程（25）

代码学习群简易教程（25）滤镜3

一、Wave滤镜：在网络中查找不到它的规范名称，为了应用时方便，我把它叫做“波形滤镜”，或者“扭曲滤镜”。 滤镜表达式举例： style="filter:Wave(add=0,freq=2, lightstrength=30,phase=50, strength=5)" 滤镜属性：

add属性是控制能不能显示原对象的。当Add=False或者Add=0时，不显示原对象，显示为扭曲对象；当Add=True或者Add=1时，显示为另一种扭曲效果。（实际上，只要应用了Wave滤镜，就不可能显示为原对象了。）

Freq属性指生成波纹的频率，也就是指定在对象上共产生多少个完整的波纹（可以理解为：文字的笔划上有几个折，图片的左右边缘上各有几个凹进去的半圆形），属值为正整数。

LightStrength属性是使生成的波纹增强光的效果，属值可以从0到100。数值越大，文字的颜色越暗；数值越大，图片中空白区域的颜色越暗。

Phase属性用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。（这个属性是指对象是从那一点开始偏移的。只有在两个相同图片的偏移量差别较大的情况下，才能够观察出效果。文字不易观察效果。）

strength属性表示波形的振幅大小，也可以简单的理解为左右扭曲的程度。

1、Wave滤镜文字：

Wave滤镜文字有三种设置方法：

（1）用文字标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在文字标签中。段落标签中要设置宽度，还可设置背景颜色或者背景图片。

<P style="WIDTH: 100%"><FONT style="FILTER: wave(add=False,lightstrength=50,strength=4,freq=2,phrase=30); LINE-HEIGHT: 150%; DISPLAY: inline-block; FONT-FAMILY: 华文行楷; COLOR: rgb(250,0,0); FONT-SIZE: 40pt"><B>欢迎您！加入代码学习群</B></FONT></P>

（2）只应用段落标签（或者块区标签），把滤镜样式设置在段落（或者块区标签）标签中，要设置宽度，还可设置背景颜色或者背景图片。

<P style="FILTER: wave(add=0,lightstrength=80,strength=4,freq=2,phrase=80); LINE-HEIGHT: 150%; WIDTH: 100%; FONT-FAMILY: 华文行楷; COLOR: rgb(250,0,0); FONT-SIZE: 40pt"><B>欢迎您！加入代码学习群</B></P>

（3）只应用文字标签，把滤镜样式设置在文字标签中，还要设置宽度，还可设置背景颜色或者背景图片。

<FONT style="FILTER: wave(add=0,lightstrength=20,strength=4,freq=2,phrase=30); LINE-HEIGHT: 150%; WIDTH: 100%; DISPLAY: inline-block; FONT-FAMILY: 华文行楷; COLOR: rgb(250,0,0); FONT-SIZE: 40pt"><B>欢迎您！加入代码学习群</B></FONT>

2、Wave滤镜图片：

Wave滤镜图片可以把滤镜样式直接设置在图片标签中。

举例如下：

<IMG style="FILTER: Wave(add=0,freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg">

（1）观察Phase属性的效果：

Wave滤镜的Phase属性（正弦波开始的偏移量）是不容易观察其效果的。看看下面的代码，观察一下Wave滤镜图片的Phase属性。第一张图片的偏移量为90，第一张图片的偏移量为0。两张图片头部开始处的不同效果，就是Wave滤镜图片Phase属性的效果。

<IMG style="FILTER: Wave(add=0,freq=4,strength=62,lightstrength=5,phase=90); WIDTH: 250px; HEIGHT: 375px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg"> <IMG style="FILTER: Wave(add=0,freq=4,strength=62,lightstrength=5,phase=0); WIDTH: 250px; HEIGHT: 375px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg">

（2）观察Freq属性的效果（生成波纹的频率）。第一张图片的频率为4，第二张图片的频率为8。

<IMG style="FILTER: Wave(add=0,freq=4,strength=12,lightstrength=5,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg"> <IMG style="FILTER: Wave(add=0,freq=8,strength=12,lightstrength=5,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg">

（3）观察LightStrength属性（波纹增强光）的效果。第一张图片的波纹增强光为5，第二张图片的波纹增强光为50。数值越大，图片中空白区域的颜色越暗。

代码举例：

<IMG style="FILTER: Wave(add=0,freq=4,strength=12,lightstrength=5,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg"> <IMG style="FILTER: Wave(add=0,freq=4,strength=12,lightstrength=50,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg">

（4）观察strength属性（波形的振幅）的效果。第一张图片的波形振幅为12，第二张图片的波形振幅为62。数值越大，图片中空白区域的颜色越暗。

举例如下：

<IMG style="FILTER: Wave(add=0,freq=4,strength=12,lightstrength=5,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg"> <IMG style="FILTER: Wave(add=0,freq=4,strength=62,lightstrength=5,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg">

（5）Wave滤镜图片的另一种扭曲效果也挺美丽的。即设置：Add=True或者Add=1。

代码举例：

<IMG style="FILTER: Wave(add=1,freq=2,strength=2,lightstrength=5,Phase=0); WIDTH: 500px; HEIGHT: 750px" border=0 src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_30.jpg">

二、Gray滤镜：

灰色效果滤镜。

滤镜表达式举例：style="Filter：Gray"

Gray滤镜，一般不应用于文字。Gray滤镜图片，把滤镜样式添加到图片标签中即可。

代码举例：

<IMG style="FILTER: Gray; WIDTH: 800px; HEIGHT: 1108px" border=0 src="http://image25.360doc.com/DownloadImg/2011/03/1516/10017611_17.jpg">

三、Invert滤镜：

Invert滤镜：用于翻转对象的可视化属性。可视化属性包括色彩、饱和度和亮度值。

Invert滤镜样式：style="Filter：Invert"

Invert滤镜不应用于文字。Gray滤镜图片，把滤镜样式添加到图片标签中即可。

代码举例：

<IMG style="FILTER: Invert; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 750px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 1080px; BORDER-LEFT-WIDTH: 0px" class=invert src="http://image61.360doc.com/DownloadImg/2013/05/1505/32338044_2.jpeg">

四、Xray滤镜：

Xray滤镜样式：style="Filter：Xray"

Xray滤镜,可以让对象反映出它的轮廓，并把这些轮廓加亮，类似于“X”光片。

Xray滤镜不应用于文字。Gray滤镜图片，把滤镜样式添加到图片标签中即可。

代码举例：

<IMG style="FILTER: Xray; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 750px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 1080px; BORDER-LEFT-WIDTH: 0px" class=invert src="http://image61.360doc.com/DownloadImg/2013/05/1505/32338044_2.jpeg">

作业：

一、填空：

本节讲解了四种滤镜。Wave滤镜的名称为（），Gray滤镜的名称为（），Invert滤镜的名称为（），Xray滤镜滤镜的名称为（）。

二、写出Wave滤镜的表达式。

三、简述Wave滤镜的五种属性。

四、简述Wave滤镜的作用。

五、简述Gray滤镜的作用。

六、简述Invert滤镜的作用。

七、简述Xray滤镜的作用。

八、应用Wave滤镜制作一篇文字网页，制作一篇图片网页。

九、应用Gray滤镜，制作一篇图片网页。

十、应用Invert滤镜，制作一篇图片网页。

十一、应用Xray滤镜，制作一篇图片网页。

“春天没来”编撰 2014年7月16日于北京