用Alpha滤镜制作垂直渐变的镜面效果

自由勇-王志勇(1980-09-26)
Webshu编辑。
1994年开始练习五笔字形；2000年底开始学习和大量实践网页制作；目前从事程序设计。
自由勇的Blog
Blog存档
 我的Blog英文版
 给我留言
访问统计：
38558

2004年02月23日 16:48　点击：超过8000次

　　本实例主要是用到样式表的FlipV滤镜(将图像垂直翻转)和Alpha滤镜(半透明效果)。
　　样式表有一个很大的不足就是它的滤镜不能产生垂直渐变的效果。(但可以产生水平渐变效果)。而且又不能将图片旋转90°或270°，为克服这个不足，本例中只好采用JavaScript做一个循环程序来产生渐变效果。

　　效果如右图所示，就好像显示器是放在玻璃茶几上产生的倒影效果。

　　这个效果如果全部用Photoshop可以轻松实现。但是为了练习或者说明样式表、HTML的功能的强大，可以举这个例子。因为整个右图如果存为GIF格式，为12K，而用代码和图片，仅在3K以内。

　　制作步骤：
　　1.右图是由一张显示器的图片59.gif和背景图片hxb.gif组成的。背景图片可以用Photoshop的渐变工具制作，前景色是#4FA6E8，背景色是#9CD8F8，图片大小是宽1px，高400px。
　　2.做一个300×400的表格，背景图片为hxb.gif。设单元格为顶边对齐，段落是居中，HTML代码是<td valign=top style=text-align:center>。
　　3.插入显示器图片59.gif，设段前为40，代码是<p style=margin-top:40>。
　　4.在这张图片代码后面紧加上<br><img src=../../p/59.gif style="filter:flipv alpha(opacity=35)">。说明：这张图我存放在与它同级目录的j文件夹，CSS多个滤镜要同时使用时，之间可以用空格，这时style后面的双引号不可省。flipv表示像图像垂直翻转，alpha(opacity=35)表示透明度为35%。
　　5.图例中，下面那个镜像的显示器是一种渐变效果。由于浏览器不支持纵向透明度渐变，例如alpha(opacity=90,style=1,finishY=169)这句无效，所以只好用JavaScript来做一个渐变的表格，来挡住下面的那个镜像倒影显示器。程序如：
　　<SCRIPT language=JavaScript>document.write('<p style=margin-top:-129><table cellspacing=0 cellpadding=0>');for(i=0;i<130;i++){document.write('<tr><td style=filter:alpha(opacity='+i+') height=1 bgcolor=99D7F7 width=184>')};document.write('</table>')</SCRIPT>
　　6.大功告成！

　　如下还有一例渐变效果：

这就是一种透明度渐变的效果。样式表alpha滤镜在起作用。例如：filter: alpha(opacity=85,style=1,finishX=230)其中，opacity=85表示透明度，style表示渐变方式，finishX表示水平方向渐变位置。

网页树树版权声明：
此文为Webshu.com独家撰稿，著作权属作者所有，禁止转载。
此文网址 http://www.webshu.com/column/102/69.html