CSS滤镜之alpha属性

css|滤镜

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这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

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

  <html>
  <head>
  <title>alpha</title>
  <style>//*定义CSS样式*//
  <!--
  div{position:absolute; left:50;top:70; width:150; }
  //*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//
    img{position:absolute;top:20;left:40;
  filter:alpha(opacity=80)}
  //*定义图片的样式,绝对定位,滤镜属性是透明度为80*//
  -->
  </style>
  </head>
  <body>
  <div>
  <p style=“font-size:48;font-weight:bold;color:red;”>
  Beautiful </p>//*定义字体属性,前景色为红色*//
  </div>
  <p><img src="/UploadPic/2007-4/200741155216786.jpg"”> </p>
  //*导入一张图片*//
  </body>
  </html>

  如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改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滤镜属性的应用,具体应用还需要您自己找个例子练一练。

时间: 2025-01-01 14:00:31

CSS滤镜之alpha属性的相关文章

实例详解CSS滤镜(12)alpha属性

alpha是来设置透明度的.先来看一下它的表达格式: filter:alpha(opacity=opcity,finishopacity=finishopacity, style=style,startX=startX,startY=startY,finishX=finishX, finishY=finishY) 哇,怎么这么长.是啊,不过这些参数都各有其用. Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明. Style参数指定了透明区域的形状特征.其中0

实例详解CSS滤镜(5)DropShadow属性

ado|css|滤镜|详解 DropShadow属性是为了添加对象的阴影效果的.它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影.看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色. Offx和offy分别X方向和Y方向阴影的偏移量.偏移量必须用整数值来设置.如果设置为正整数,代表X轴的右方向和Y轴的向下方向.

实例详解CSS滤镜(4)Chroma属性

css|滤镜|详解 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</ti

实例详解CSS滤镜(3)Blur属性

css|滤镜|详解 假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊.CSS下的blur属性就会达到这种模糊的效果. 先来看一下blur属性的表达式: filter:blur(add=add,direction,strength=strength) 我们看到blur属性有三个参数:add.direction.strength. Add参数有两个参数值:true和false.意思是指定图片是否被改变成模糊效果. Direction参数用来设置模糊的方向.模糊效果是按照顺时针方向进行的.其

实例详解CSS滤镜(2)Mask属性

css|滤镜|详解 Mask属性为对象建立一个覆盖于表面的膜.它的表达式也很简单: Filter:Mask(Color=颜色) 只有一个Color参数,用来指定使用什么颜色作为掩膜. 同样,我们来看一下一幅图片在加上mask属性前后的效果(见下图): 加上MASK属性的效果就好象是在用有色眼镜看物体一样.上面的效果的代码如下: <html> <head> <title> mask filter </title> <style>//*设置CSS样式

CSS滤镜之Shadow属性

ado|css|滤镜 Shadow属性可以在指定的方向建立物体的投影.它的表达式是这样的: Filter:Shadow(Color=color,Direction=direction) 在这里,Shadow有两个参数值:Color参数用来指定投影的颜色:Direction参数用来指定投影的方向. 这里说的方向与我们在第二节Blur属性中提到的"方向与角度的关系"是一样的. 也许您会问,前面讲到的Dropshadow属性和Shadow属性有什么不同吗? 光说的话,您恐怕还难以理解,让我们

CSS滤镜之Chroma属性

css|滤镜 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</title

CSS滤镜之Wave属性

css|滤镜 Wave属性用来把对象按照垂直的波纹样式打乱.它的表达式如下: Filter:Wave(Add=True(False),Freq=频率,LightStrength=增强光效, Phase=偏移量,Strength=强度) 我们看到Wave属性的表达式还是比较复杂的,它一共有五个参数.Add参数有两个参数值:True代表把对象按照波纹样式打乱:False代表不打乱: Freq参数指生成波纹的频率,也就是指定在对象上共需要产生多少个完整的波纹. LightStrength参数是为了使生

CSS滤镜之Xray属性

css|滤镜 Xray就是X射线的意思. Xray属性,顾名思义,这种属性产生的效果就是使对象看上去有一种X光片的感觉. 它的表达式很简单: Filter:Xray 我们还是先来看一个页面(如下图): 如果在上面的页面中加入Xray属性,也就是在<head>的<Style>中,增添下面这一句代码: Filter:Xray 您再看这个页面就会是另一种效果了:(如下图) 看,是不是就像给它拍了一张X光片一样.