|
|
7#

楼主 |
发表于 2007-10-8 14:33:45
|
只看该作者

ALPHA 属性
【Alpha滤镜属性】这个名字,在Flash和Photoshop经常见到。它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。由于“Alpha”滤镜的参数多,我们先来看一下下边的表格:
参数名
效 果 说 明
取值说明
Opacity
不透明的程度,百分比。 取值0~100
FinishOpacity
可以制作出透明渐变的效果。 取值0~100
Style
指定渐变的显示形状。 0:没有渐变;1:线性渐变;
2:圆形渐变;3:矩形辐射。
StartX
渐变开始的 X 坐标值
StartY
渐变开始的 Y 坐标值
FinishX
渐变结束的 X 坐标值
FinishY
渐变结束的 Y 坐标值
“opacity”:代表透明度程度。范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
“finishopacity”:是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
“style”:指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
“StartX”和“StartY”:代表渐变透明效果的开始X和Y坐标。
“FinishX”和“FinishY”:代表渐变透明效果结束X和Y坐标。
请看下面的演示:
Alpha 属性值:
Alpha(Opacity=50, FinishOpacity=100, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)
Style 加载在单元格<td>上显示效果如下图:
原图
style=0
style=1
style=2
style=3
Style加载在图片上显示效果如下图:
原图
style=0
style=1
style=2
style=3
Style加载在文字上显示效果如下图:
Alpha(Opacity=30,Style=0)
这是文字透明效果演示
BLENDTRANS 属性
【BlendTrans属性】淡入淡出的效果滤镜,能产生极精细的图片转换效果。
![]()
制作说明:
BlendTrans滤镜功能也比较单一,只有一个参数:Duration(变换时间)。需要借助于javascript来调用它的方法来实现转换功能。使用BlendTrans滤镜,首先您要准备几张宽高尺寸相同的图片,并分别命名,保存在图像目录下,如:images/*.jpg。如果用4幅的话,分别取名为:blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg。(用其它名称也可以,但下边的javascript设置要相应调整。)
制作方法:
1、制作一个BlendTrans滤镜,取名为“myblen",Duration设置为“3"(即转换时间为3秒),滤镜设置好后,在网页源代码的< head >与< /head >之间将有下面这样一段代码:
< style type="text/css" >
< !--
.myblen { filter:blendTrans(Duration=3)
}
-- >
< /style >
2、插入第一张图片(本例图片为570X150像素),在图片的属性面板上给图片加个名称:myimg
3、把BlendTrans滤镜加载到图片上,这时图片的“img"标记的代码是这样的:<img src="images/blen1.jpg" name="myimg" width="570" height="150" class="myblen" id="myimg">;
4、在网页的源代码< head >与< /head >之间插入下面这段javascript程序:
<script language="javascript" >
<!--
function img(len)
{
this.length=len;
}
imgname=new img(4);
imgname[0]="images/blen1.jpg";
imgname[1]="images/blen2.jpg";
imgname[2]="images/blen3.jpg";
imgname[3]="images/blen4.jpg";
var i=1;
function play()
{
if (i==3)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply();
myimg.src=imgname;
myimg.filters[0].play();
mytimeout=setTimeout("play()",6000);
}
-->
</script >
5、在网页源代码的< body >加入这样的一句代码:onload="play()"。
设置完成,点F12预览效果
【定义 CSS 样式扩展属性】“扩展”样式属性包括过滤器、分页和光标选项,它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持。
指定扩展属性:
在“CSS 样式定义”对话框中,选择“扩展”(如下图),然后设置所需的样式属性。
![]()
请注意:下列任意属性如果您认为不重要可以保留为空。
分页:在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何 4.0 版本浏览器的支持,但可能受未来的浏览器的支持。
属 性
说 明
hand
手形
crosshair
精确定位“+”字
text
文本“I”形
wait
等待
default
默认光标
help
帮助
e-resize
箭头朝右方
ne-resize
箭头朝右上方
n-resize
箭头朝上方
nw-resize
箭头朝左上方
w-resize
箭头朝左方
sw-resize
箭头朝左下方
s-resize
箭头朝下方
se-resize
箭头朝右下方
auto
自动 按照默认状态改变
光标:位于“视觉效果”下的“光标”选项,是光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单(右图)进行设置。 (左图)是它的详细列表和相关说明。
过滤器:又称 CSS滤镜, 对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性,页面才变得更加漂亮。 从“过滤器”弹出式菜单中选择一种效果并视具体要求加以设置。各种 CSS 滤镜属性的详细介绍请从导航条选择“滤镜属性”按钮浏览。 |
|