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

代码学习群简易教程（26）滤镜4

本节讲解css的三种常用滤镜：Mask滤镜、Light滤镜与DropShadow滤镜。

一、Mask滤镜：覆膜滤镜

Mask滤镜为对象建立一个覆盖于表面的膜。Mask滤镜只有一个Color属性，用来指定使用什么颜色作为掩膜。mask滤镜对图片文件的支持不够，不能达到理想的效果。

Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，相当于用一块有色布把物件盖起来。其实滤镜的颜色不是主要的，关键的倒是背景颜色，五彩缤纷的文字颜色实际上就是背景的颜色。

Mask滤镜的表达式：FILTER: mask(color=#ffff00)

1、Mask滤镜文字：

Mask滤镜文字，是一种漂亮的文字。你可以选择不同的背景制作出各种各样漂亮的文字效果来。

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

（1）用二层块区标签（或者段落标签）控制文字内容。在第一层块区标签中设置背景图片，背景图片最好是闪光的背景图片或者是变色的背景图片。在第二层块区标签中设置滤镜样式。

代码举例：

<DIV style=" WIDTH: 680px; BACKGROUND: url(http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif); " align=center border="0"> <DIV style="FILTER: mask(color=#00aaff)" align=center><FONT style="FONT-FAMILY: 隶书,SimLi; FONT-SIZE: 40pt" color=#336699><STRONG>“春天没来”拜访您 </STRONG></FONT></DIV></DIV><BR>

（2）用块区标签与移动标签控制文字内容。块区标签在最外层，标签中要设置背景图片，背景图片最好是闪光的背景图片或者是变色的背景图片。移动标签中设置滤镜样式。

代码举例：

<DIV style=" WIDTH: 680px; BACKGROUND: url(http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif); " align=center border="0"> <MARQUEE style="FILTER: mask(color=#00aaff)" height=80 behavior=alternate width=680 scrollAmount=3 scrollDelay=10><FONT style="FONT-FAMILY: 隶书,SimLi; FONT-SIZE: 40pt" color=#336699><STRONG>“春天没来”拜访您 </STRONG></FONT></MARQUEE></DIV><BR>

（3）用表格制作Wave滤镜文字。在表格标签中设置背景图片，背景图片最好是闪光的背景图片或者是变色的背景图片。在表格的列标签中设置滤镜样式。

代码举例：

<TABLE border=5 background=http://image33.360doc.com/DownloadImg/2011/08/0413/15260442_9.gif align=center> <TBODY> <TR> <TD style="FILTER: mask(color=#ffff00)" align=center><FONT style="FONT-FAMILY: 隶书,SimLi; FONT-SIZE: 40pt" color=#336699><STRONG>“春天没来”拜访您 </STRONG></FONT></TD></TR></TBODY></TABLE><br><br> <TABLE border=5 background=http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif align=center> <TBODY> <TR> <TD style="FILTER: mask(color=#00ff00)" align=center><FONT style="FONT-FAMILY: 隶书,SimLi; FONT-SIZE: 40pt" color=#336699><STRONG>“春天没来”拜访您 </STRONG></FONT></TD></TR></TBODY></TABLE>

效果：

“春天没来”拜访您

注释：

1、闪光的文字颜色，是背景图片的颜色；文字周围空白区域的颜色是背景颜色。

2、观看滤镜效果，最好是使用IE浏览器。

二、Light滤镜：模拟光源滤镜。

Light滤镜能产生一个模拟光源的效果。当你把鼠标箭头在图片上移动时，灯光还会跟着鼠标移动呢！

代码举例：

<DIV align=center><IMG style="FILTER: light(); WIDTH: 332px; HEIGHT: 500px" id=mypic onload=javascript:this.filters.light.addCone(200,200,200,300,300,150,250,50,80,25) onmousemove=javascript:this.filters.light.moveLight(0,event.offsetX,event.offsetY,100,100) src="http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_33.jpg"></DIV>

遗憾的是，目前360图书馆已经不支持这种滤镜效果啦！你只能把此代码“粘贴”到你的图书馆首页撰写文章处的“代码编辑”页面中，然后点击一下页面左下角的“代码编辑”按钮，切换到“文字图片编辑”页面观看一下这种美丽的效果。

三、DropShadow滤镜:重叠阴影滤镜。

滤镜样式举例：style=“filter: dropshadow(color=#ff0000,offx=-2,offy=-2,positive=1) ”

属性解析：

Color属性：设置阴影颜色。

Offx属性：阴影相对于原始对象的水平位移量。设置值为整数，单位为像素。若水平往右移，则正数；反之为负数。

Offy属性：阴影相对于原始对象的垂直位移量。设置值为整数，单位为像素。若垂直往下移，则正数；反之为负数。

positive属性：设置阴影的透明度，0（透明）1（不透明）

注：阴影的透明度设置为Positive=0时，阴影颜色呈现为长方形的小方块，阴影呈现为透明的白色阴影。

1、DropShadow滤镜文字：

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

（1）用文字标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在段落标签中。文字标签中设置文字常用属性。

代码举例：

<P style="FILTER: dropshadow(color=#ffff00,offx=-2,offy=-2,positive=1)"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 40pt; FONT-WEIGHT: normal" color=#ff0000 face=华文行楷><B>“春天没来”欢迎您</B></FONT></P>

（2）只应用段落标签（或者块区标签），把滤镜样式与文字属性都设置在段落（或者块区标签）标签中，不可省略DISPLAY: inline-block属性。

代码举例：

<P style="FILTER: dropshadow(color=#ff0000,offx=-2,offy=-2,positive=1); DISPLAY: inline-block; FONT: 40pt 华文行楷; COLOR: rgb(255,255,0)"><B>“春天没来”欢迎您</B></P>

（3）只应用文字标签，把滤镜样式与文字属性都设置在文字标签中，不可省略DISPLAY: inline-block属性。

代码举例：

<FONT style="FILTER: dropshadow(color=#ff0000,offx=-2,offy=-2,positive=1); DISPLAY: inline-block; FONT: 40pt 华文行楷; COLOR: rgb(0,255,0)" face=华文行楷><B>“春天没来”欢迎您</B></FONT>

2、DropShadow滤镜图片：

DropShadow滤镜对一般图片支持不够，透明图片的滤镜效果还比较美观。

DropShadow滤镜图片的三种设置方法：

（1）段落标签（或者块区标签）与图片标签组合应用，把滤镜样式设置在段落标签中。

代码举例：

<P style="FILTER: dropshadow(color=#00ff00,offx=-8,offy=-8,positive=1)" width=368 height="300"><IMG id=dropshadow滤镜图片 title="春天没来 教你学滤镜" src="http://userimage5.360doc.com/14/0630/20/4127803_201406302012470568.png" width=368 height=300></P>

（2）只用图片标签，把滤镜样式设置在图片标签中。

代码举例：

<IMG style="FILTER: dropshadow(color=#0000ff,offx=8,offy=8,positive=1)" id=dropshadow滤镜图片 title="春天没来 教你学滤镜" src="http://userimage5.360doc.com/14/0630/20/4127803_201406302012470568.png" width=368 height=300>

（3）移动标签与图片标签组合应用，把滤镜样式设置在移动标签中。

代码举例：

<MARQUEE style="FILTER: dropshadow(color=#ff0000,offx=8,offy=-8,positive=1)" height=330 behavior=alternate width=780 scrollAmount=3 scrollDelay=10> <DIV style="WIDTH: 368px; BACKGROUND: url(地址); HEIGHT: 300px" align=center><IMG style="WIDTH: 368px; HEIGHT: 300px" title="春天没来 教你学滤镜" border=0 src="http://userimage5.360doc.com/14/0630/20/4127803_201406302012470568.png"> </DIV></MARQUEE>

作业：

一、填空：

1、Mask滤镜的名称为（），Mask滤镜为对象建立一个（）。Mask滤镜只有一个Color属性，用来指定（）作为掩膜。mask滤镜对图片文件的支持不够，达不到（）的效果。

2、Mask滤镜可以为网页上的HTML元件对象作出一个（），相当于用一块有色布把物件盖起来。其实滤镜的颜色不是主要的，关键的倒是（），五彩缤纷的文字颜色实际上就是（）。

3、Light滤镜的名称为（），Light滤镜能产生一个（）的效果。当你把鼠标在图片上移动时，（）会跟着鼠标移动。

4、DropShadow滤镜的名称为（），DropShadow滤镜的五种属性分别是：（）、（）、（）、（）、（）。

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

三、简述Wave滤镜文字的三种设置方法。

四、简述欣赏Light滤镜图片的方法。

五、简要叙述DropShadow滤镜的五种属性。

六、简述DropShadow滤镜文字的三种设置方法。

七、简述DropShadow滤镜图片的三种设置方法。

八、制作一篇Mask滤镜文字网页。

九、制作一篇DropShadow滤镜文字网页。

十、制作一篇DropShadow滤镜图片网页。

“春天没来”编撰

2014年7月18日于北京