1、概述
CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象,我们先来看一下它的书写格式:
filter:filtername(parameters)
Filter是滤镜属性选择符。
也就是说,只要您进行滤镜操作,就必须先定义filter;filtername是滤镜属性名,这里包括alpha、blur、chroma等等多种属性,详细内容请看下表:
上面filter表达式中括号内的parameters是表示各个滤镜属性的参数,也正是这些参数决定了滤镜将以怎样的效果显示。
2、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代表统一形状;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=“ss01076.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
3、blur属性
假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
先来看一下blur属性的表达式:
filter:blur(add=add,direction,strength=strength)
我们看到blur属性有三个参数:add、direction、strength。
Add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上,每45度一个单位,默认值是向左的270度。角度方向的对应关系见下表:
Strength参数值只能使用整数来指定,它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
还是看一个例子吧。
看起来是不是有些像万花筒,在这个例子中加入了一些JavaScript的语句,代码如下:
<html>
<head>
<title>blur css</title>
<script>
function handlechange(obj)
//*设置一个循环函数handlechange,对象是obj*//
{ with(obj.filters(0))//*Obj的filter属性*//
{ if (strength<255)//*设置循环条件*//
{ strength +=1;direction +=45;}
//*每循环一次strength就加1,direction加45度*//
}
}
</script>
</head>
<body>
<p><img id =“img1” src=“ss01087.jpg”
style=“filter:blur(strength=1)”
onfilterchange=“handlechange(this)”>
//*导入一幅图片,初始blur属性strength等于1,同时调用onfilterchange函
数*//
</p>
</body>
</html>
注:在javascript中blur属性是这样定义的:
[oBlurfilter=] object.Filters.blur
通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1,得出来的字体效果是这样的(如下图):
怎么样,是不是有些印象派的意思,这种效果的实现代码如下:
<html>
<head>
<title>filter blur</title>
<style>//*CSS样式定义开始*//
<!--
div{width:200;
filter:blur(add=true,direction=90,strength=25);}
//*设置DIV样式,滤镜blur属性*//
-->
</style>
</head>
<body>
<div style=“width:702; height: 288”>
<p style=“font-family:lucida handwirting italic;
font-size:72;font-style:bold;color:rgb(55,72,145);” >
LEAF</p>
//*定义字体名称、大小、样式、前景色*//
</div>
</body>
</html>
我们看到strength设置为25,如果把其值再改大一些,就会达到非常夸张的效果,同时把Direction参数值为180,显示效果如下图:
用blur属性设置字体可以达到很多效果,把direction和strength再做修改,还能达到多种效果,您可以自己修改试一试。