作者:冯永曜
“Alpha”滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。由于“Alpha”滤镜的参数比较多,所以我们先来了解释一下参数,各参数含义分别如下:
“opacity”:代表透明度水准。范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
“finishopacity”:是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
“style”:指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
“StartX”和“StartY”:代表渐变透明效果的开始X和Y坐标。
“FinishX”和“FinishY”:代表渐变透明效果结束X和Y 的坐标。
好了,讲了一堆参数,我们来做几个实例试试:
一、特殊的文字效果 把“Alpha”滤镜加载到文字所在的< td >上,能产生一些奇妙的效果,请看下图:
图1
图2
图3
上面的三种效果除“Style”参数不同外,其它参数均相同。图1的代码是: Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100);
图2的滤镜代码为:Alpha(Opacity=10, FinishOpacity=90, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100);
图3的滤镜代码为:Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100);
在使用“Alpha”滤镜时要注意:
1、由于“Alpha”滤镜使当前元素部分透明,该元素下层的内容的颜色对整个效果起着重要作用,因此颜色的合理搭配相当重要;
2、透明度的大小要根据具体情况仔细调整,取一个最佳值。
二、新颖别致的跑马灯 跑马灯特效在现在的网站已司空见惯了,但象下面这样淡入淡出的跑马灯还不多,请看下图:
图4 别致的跑马灯
用“Alpha”滤镜你也可以轻松地做出上面那种效果的跑马灯。具体制作方法如下:
1、插入一个一行一列的表格,把表格的背景设置为“#000000”;
2、在DW3中设置好alpha滤镜,具体的滤镜代码是:.alpha1 { filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)};
3、在表格中插入一个跑马灯,并在跑马灯中加入alpha滤镜,结束!这里要注意的是不要把“Alpha”滤镜加载到< td >上,而是要加载到跑马灯上,否则效果将在相径庭了。按F12看看吧。
若你手头没有跑马灯程序,我这里给出一个,省得你到处找,烦着呢!
< marquee border="0" class="alpha2" >跑马灯内容< /marquee >
三、仿电视效果 请下面的效果图:
图5、6 仿电视效果
由于该效果是动态的,上面是我抓的两张过程图片。制作方法如下:
1、插入一个1*1的表格,并用一张图片作为表格的背景。
2、我们把单元格的背景设置为白色,并在表格的单元格上加载一个alpha滤镜,滤镜代码为:.alpha1 {filter:alpha(opacity=50) },这里滤镜的其它参数取默认值。
3、用鼠标在表格的单元格中点一下,然后点击主菜单的“Insert”,并在其下拉出的菜单中选择“Layer”子菜单,插入一个层(我们称其为:layer1)。我们再次点击主菜单的“Insert”,并在其下拉出的菜单中选择“Layer”子菜单,再插入一个层(我们称其为:layer2)。
4、我们称Layer1为Layer2的父层,那么Layer2就是Layer1的子层,注意:切不可用鼠标拖动Layer1。把Layer1的Width和Height均设置为“1”。把Layer2拖到表格上,并调整其大小与表格完全重合。
5、在Layer2上插入一个“ Marquee”(滚动字幕),按F12就能看到象上图那样的效果了。
本例的alpha滤镜使得背景图片看起来象被蒙上了一层薄纱,从而使得在其上面的文字能突出显示,这也是在电视中经常看到的效果。另外也请你注意一下3、4两步插入图层的技巧,这样插入的图层,无论你在其前后插入多少内容,它与背景图片的相对位置不变,它克服了在DW3中图层使用绝对坐标带来的定位不准的问题。
分享到:
相关推荐
用css alpha 滤镜 实现input file 样式美化代码
文中介绍了使用Dreamweaver MX制作滤镜的方法.并以Alpha滤镜和Glow滤镜为例详细介绍了滤镜制作的全过程及其制作过程中的心得与体会
alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。...
css教程,精通css的滤镜,第一章:css简介。第二章:CSS扩展部分:CSS滤镜属性(Filter Properties)。第三章:Alpha 滤镜 第四章:Gray ,Invert,Xray 滤镜。第五章:精通 CSS 滤镜(五)
alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 chroma:制作专用颜色透明 DropShadow:创建对象的固定影子 FlipH:创建水平镜像图片 FlipV:创建垂直镜像图片 glow:加光辉在附近对象的...
详细解读iecss滤镜的各种属性,如alpha、shadow、dropshdow、blur等类别。
css 滤镜例子大全;包含alpha(通道) blur(模糊) Chroma(透明色) DropShadow(投射阴影) FlipH(水平翻转)均有例子
CSS滤镜参考语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)script 语法:HTMLElement.filters.filterName.fParameter=value;...
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用CSS设置...
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用CSS设置...
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用...
经过本人查阅大量资料,实验N次终于找到了一个兼容ie6,ie7,ie8以及firefox的css透明滤镜的方法,且看我举例说明. html代码: 复制代码代码如下: ”body”> <span><龙哥博客>解决CSS滤镜同时过滤文字的问题</span>...
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, …) } Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 ...
CSS样式的filter(滤镜效果)对HTML的一些标记设置滤镜效果。 黑白照片 filter: gray; X光照片 filter: Xray; 风动模糊 filter: blur(add=true,direction=45,strength=30); 正弦波纹 filter: Wave(Add=0, Freq=60, ...
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.1.1 字体 3.1.2 文字大小 3.1.3 文字颜色 3.1.4 文字粗细 3.1.5 斜体 3.1.6 文字的下划线、顶划线和删除线 3.1.7 英文字母大小写 3.2...
IE Only Step1: ... .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px
纯CSS控制DIV背景透明效果,没有什么好解释的,代码全在文件里面,直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的...
第8章 CSS滤镜 172 8.1 滤镜概述 173 8.2 滤镜属性 173 8.2.1 Alpha属性 174 8.2.2 Blur属性 176 8.2.3 Chroma属性 180 8.2.4 DropShadow属性 182 8.2.5 FlipH、FlipV属性 183 8.2.6 Glow属性 185 8.2.7 Gray属性 ...