Chinaunix首页 | 论坛 | 博客
  • 博客访问: 29951186
  • 博文数量: 708
  • 博客积分: 12163
  • 博客等级: 上将
  • 技术积分: 8240
  • 用 户 组: 普通用户
  • 注册时间: 2007-12-04 20:59
文章分类

全部博文(708)

分类: Java

2009-11-10 14:10:01

滤镜的属性参数

a) 设置透明度Alpha  

语法: { FILTER: Alpha(Opacity=n1,Finishopacity=n2,Style=#,Startx=x1,Starty=y1,Finishx=x2,Finishy=y2)}
"Opacity"
透明度.0100,0代表完全透明.100代表完全不透明.
"Finishopacity"
可选,指定结束时的透明度.0100.
"Style"
透明区域形状.其中#可为:0代表统一形状,1线形,2放射状,3长方形.
"Startx"
"Starty"渐变透明效果的开始XY坐标.
"Finsihx"
"Finsihy"渐变透明效果结束XY的坐标.

b) 模糊Blur   

语法:{filter:blur(add=add,direction=direction,strength=strength)}
"add""TRUE(
默认)"或者"FALSE".指定图片是否被改变成印象派的模糊效果.1为真,0为假
"direction"
设置模糊的方向.0垂直向上,45度为一个单位.默认值向左的270.
"strength"
有多少像素的宽度受到模糊影响,默认是5个像素.

c) 透明 Chroma  

把指定的颜色设置为透明
语法: {filter:chroma(color=color)}

COLOR,设置为透明色的颜色的值

举例:

d) 投射阴影DropShadow  

语法: {filter:Dropshadow(Color=color,Offx=x,Offy=y,positive=positive)}
"Color"
阴影颜色
"Offx"
"Offy"X方向和Y方向阴影的偏移量.
"Positive"
如果为"True"为任何的非透明像素建立可见的投影.如果为"False",为透明的像素部分建立可见的投影.

e) 翻转 FlipH, FlipV  

语法:{filter: FlipH} ,{filter: FlipV}

分别是将对象水平反转和垂直反转

f)对象的外边界增加光效Glow 

语法:{filter:Glow(Color=color,Strength=n)}

"Color"发光色
"Strength"
强度从1255

g)图象色彩转换

Gray灰度   Invert反色   Xray映出图象轮廓并把这些轮廓加亮(X光效果,灰度后反色)
语法: {filter:gray} {filter:invert} {filter:xray}

h) 阴影效果Shadow  

语法: {filter:shadow(Color=color,Direction=direction)}
Color
投影色
Direction
投影.0度垂直向上,然后每45度为一个单位.默认值是向左的270.

i) 正弦波纹Wave  

X轴和Y轴方向利用正弦波纹打乱图片

语法: {filter:wave(Add=True/False,Freq=n,Lightstrength=n1,Phase=n2,Strength=n3)}
"Add"
是否打乱,默认是"True".
"Freq"
产生多少个完整的波纹.
"LightStrength"
增强光影,0-100的整数值.
"Phase"
正弦波的偏移量,通常值为0,范围是0-100的整数值
"Strength"
代表振幅大小.

 
 
alpha是来设置透明度的。先来看一下它的表达格式:

  filter:alpha(opacity=opcity,finishopacity=finishopacity,
  style=style,startX=startX,startY=startY,finishX=finishX,
  finishY=finishY)

  哇,怎么这么长。是啊,不过这些参数都各有其用。
  Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。
  Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
  从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

透明效果

  实现上面这种效果的代码如下:

  
  
  alpha
  
  
  
  


  


  Beautiful

//*定义字体属性,前景色为红色*//
  

  


  //*导入一张图片*//
  
  

  如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示:

  img{position:absolute;top:20;left:40;
  filter:alpha(opacity=0,finishopacity=100,
  style=1,startx=0,starty=85,finishx=150,finishy=85);}

  //*设置透明渐变效果,起始坐标,终止渐变坐标,并设置透明样式值(style=1)为   线形*//

  这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果,点击缩略图可放大。

  

      Style=1        Style=2        Style=3

  以上是CSS的Alpha滤镜属性的应用,具体应用还需要您自己找个例子练一练。

阅读(2136) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~