站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
MolyX CSS滤镜 blur属性
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__NOTOC__ <span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[MolyX CSS教程|上一页]] | {{Template:MolyX导航}}</span> <div style="clear:both;"></div> 假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊。[[CSS]]下的blur属性就会达到这种模糊的效果。 先来看一下blur属性的表达式: filter:blur(add=add,direction,strength=strength) 我们看到blur属性有三个参数:add、direction、strength。 Add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上,每45度一个单位,默认值是向左的270度。角度方向的对应关系见下表: <div> [[Image:mx29.png]] </div> Strength参数值只能使用整数来指定,它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 看起来是不是有些像万花筒,在这个例子中加入了一些JavaScript的语句,代码如下: <pre> <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> </pre> 注:在[[javascript]]中blur属性是这样定义的: <nowiki>[oBlurfilter=] object.Filters.blur</nowiki> 这个例子是Blur属性的一个比较复杂的例子。 通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1,得出来的字体效果是这样的(如下图): <div> [[Image:mx30.png]] </div> 怎么样,是不是有些印象派的意思,这种效果的实现代码如下: <pre> <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> </pre> 我们看到strength设置为25,如果把其值再改大一些,就会达到非常夸张的效果,同时把Direction参数值为180,显示效果如下图: <div> [[Image:mx31.png]] </div> 用blur属性设置字体可以达到很多效果,把direction和strength再做修改,还能达到多种效果,您可以自己修改试一试。 [[category:MolyX手册]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:MolyX导航
(
编辑
)