相关文章
企通互联绿色下划线的简洁CSS导航代码
企通互联针对浏览器隐藏CSS之九大技巧
网页设计在Dreamweaver8中轻松插入Flash视频
企通互联Dreamweaver MX 2004 行为之改变对象属性
北京网站建设用Dreamweaver MX建立一个简单的图书查询系统
网站制作DreamWeaver表格妙用-线框制作详解(5)
北京网站设计Flash MX 2004 功能介绍（4）
网站设计Flash视频教程：2.9 绘制窗户
www.qitongnet.com通过CSS类型的顺序改变翻滚效果
www.qitongnet.com改善用户体验之密码强度提示
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站建设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>网站设计
<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)”> www.qitongnet.com
//*导入一幅图片，初始blur属性strength等于1，同时调用onfilterchange函北京网站设计
数*// 北京网站设计
</p> 网页设计
</body> www.qitongnet.com
</html>
注：在javascript中blur属性是这样定义的： 网站设计
[oBlurfilter=] object.Filters.blur
这个例子是Blur属性的一个比较复杂的例子，下一节我将向您介绍两个较简单的blur属性效果。
通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）：
怎么样，是不是有些印象派的意思，这种效果的实现代码如下：
<html>网页设计
<head> 北京网站建设北京网站建设
<title>filter blur</title> 北京网站制作
<style>//*CSS样式定义开始*// www.qitongnet.com
<!-- 北京网站设计
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)；” >北京网站制作
www.qitongnet.com LEAF</p> 北京网站建设
//*定义字体名称、大小、样式、前景色*// 北京网页设计
</div> 网页设计
</body> 北京网站建设
</html>
我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：
用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
北京网站设计网站设计