相关文章
网页设计风讯CMS 3.2版升级到3.2sp1的方法
企通互联标题下的分隔线在4.0中如何设置，还有标题的行间距
北京网站建设个性化表单五技巧
企通互联网页中嵌入Flash的方法讨论
北京网站设计如何用Dreamweaver批量做web网页
网站制作自己动手制作手机Flash主题动画
北京网站建设Flash MX 2004 功能介绍（2）
网站设计Flash8横空出世 鲜为人知的新特性大揭露
网站制作用Dreamweaver和ASP实现分页技术的参考
北京网页设计修饰之美：CSS在表格边框上的美学应用
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作网站制作CSS滤镜:blur属性
网站制作网站制作CSS滤镜:blur属性
先来看一下blur属性的表达式：
filter：blur（add=add，direction，strength=strength）
北京网站制作 我们看到blur属性有三个参数：add、direction、strength。 网页设计
Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 企通互联 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：
Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。网站制作
还是看一个例子吧。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<html>企通互联
<head>网站制作
<title>blur css</title> www.qitongnet.com网站建设
<script>网站设计
function handlechange(obj)网站制作
{北京网站设计
with(obj.filters(0))北京网站设计
{网页设计
if (strength<255)北京网站制作
{网页设计
strength +=2;北京网站建设
direction +=45;北京网站设计
}北京网页设计
}网站建设
}北京网站制作
</script>网站制作
</head>
<body>企通互联
<p><img id ="img1" src="jsimg/1.jpg" style="filter:blur(strength=1)" 北京网站设计网页设计
onfilterchange="handlechange(this)">企通互联
</p>北京网页设计
</body>企通互联
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
看起来是不是有些像万花筒，在这个例子中加入了一些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属性效果。
通过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再做修改，还能达到多种效果，您可以自己修改试一试。 北京网页设计