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

English Edition | 站内检索：
网站首页 | 网页技术 | 教程相关 | 软件应用 | 常见问题 | 新手上路 | 网页论坛 | 研究报告
 上网指南 | 网络病毒 | 邮件指南 | 解决方案 | 企业服务 | 服务中心 | 自由泳网 | 想象讲场

自由勇-王志勇(1980-09-26)
Webshu编辑。
1994年开始练习五笔字形；2000年底开始学习和大量实践网页制作；从事网站程序设计。

访问统计：
5573

　　　　用Alpha滤镜制作垂直渐变的镜面效果　作者：自由勇

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代码是。
　　3.插入显示器图片59.gif，设段前为40，代码是

。
　　4.在这张图片代码后面紧加上
。说明：这张图我存放在与它同级目录的j文件夹，CSS多个滤镜要同时使用时，之间可以用空格，这时style后面的双引号不可省。flipv表示像图像垂直翻转，alpha(opacity=35)表示透明度为35%。
　　5.图例中，下面那个镜像的显示器是一种渐变效果。由于浏览器不支持纵向透明度渐变，例如alpha(opacity=90,style=1,finishY=169)这句无效，所以只好用JavaScript来做一个渐变的表格，来挡住下面的那个镜像倒影显示器。程序如：
　　
　　6.大功告成！

　　如下还有一例渐变效果：

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

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