快速业务通道

用CSS制作Alpha滤镜测试板

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-05

    alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数值后,点一下鼠标,立即可看到结果,完全的“立等可见”,使你很快就能获得一组合适地参数值,从而给你节约许多宝贵时间。

  测试板具体的制作方法:

  1、输入一段文字或插入一张图片;

  2、制作一个alpha滤镜,名称为:.alpha1。参数任意,不是使用Dreamweaver的网友,可直接把下面的滤镜代码复制到网页源代码的〈head〉与〈/head〉之间;

〈style type="text/CSS"〉
〈!--
.alpha1 {filter:alpha(opacity=50) }
--〉
〈/style〉

  3、插入一个层,给层取名为:myimage,这一点很重要,否则javascript程序将无法执行,因它不知对那个对象操作。在层上插入一张图片或写上一段文字(若是用文字则应给层设置背景色),在层上加载alpha滤镜。这个图层必需能覆盖信住下面的文字或图象;

  4、在上面插入的层中再插入一个层(这个图层应放置在上次插入的图层的下方,不要相互遮盖),并在层上做一个输入alpha滤镜主要参数的表单,像图1所示的那样,表单中要加入一个“onchage”事件来调用javascript函数,以达到动态改变Alpha滤镜参数的目的。网页源代码中表单的代码是这样的:

〈form〉
〈p〉输入透明度
〈input type="text" name="opacity" size="4" value="100" onChange="setfilter()"〉
〈br〉
输入结束状态的透明度
〈input type="text" name="finishopacity" size="4" value="0" onChange="setfilter()" 〉
〈br〉
输入样式的值
〈input type="text" name="setstyle" size="3" value="0" onChange="setfilter()" 〉
〈/p〉
〈/form〉

  这段代码中的“onChange="setfilter()"”在用Dreamweaver制作表单时不能自动生成,必须手动加入

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号