操作系统 程序设计 图形图像 媒体动画 机械电子 WEB开发 数据库 办公软件 路由技术 网络原理 网络架设 网络管理 认证培训
您的位置:计算机资讯网 >> WEB开发 >> HTML >> CSS教程 -> CSS滤镜应用技巧
CSS滤镜应用技巧
2004-10-14 10:43:23


常做网页的朋友们一定都知道CSS吧,CSS是Cascading Style Sheet的缩写,通常人们都叫它“样式表”或“级联样式”。它的功能非常全面,从文字、图片、段落到整个网页各个方面都有它的强大之处,今天我们就来说说CSS中的滤镜效果。

大家在做网页时,对图像处理多数都是用Photoshop等图形处理软件吧,其实在CSS中自带了许多滤镜,合理应用这些滤镜您同样可以做出以上软件所做出的效果。下面我就通过实例来看看CSS中的滤镜应用。

图片雾化

代码:

1、内部插入式

〈head〉〈/head〉之间插入:

〈style type = text/css〉
.fog{filter:alpha(opacity=100,style=2)}
〈/style〉

然后再在图片属性代码中加class="fog"

注意:〈head〉〈/head〉之间插入代码中fog前有一个“.”(不包括引号),请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入:

style=" filter:alpha(opacity=100,style=2)"

效果如图1。


图1

特点:通过使用CSS的“alpha”滤镜,做出图片雾化的效果。

延伸:“style”参数:“0”没有渐进,“1”直线渐进,“2”圆形渐进,“3”矩形渐进;参数“opacity”为不透明的程度百分比。

图片风化

代码:

1、内部插入式

〈head〉〈/head〉之间插入:

〈style type = text/css〉
.wind{filter:Blur(Strength=10)}
〈/style〉

然后再在图片属性代码中加class="wind"(注意“.”号)

2、直接插入式

在图片属性代码中加入:

style=" filter: Blur(Strength=10)"

效果如图2。


图2

特点:通过使用CSS的blur滤镜,使图片具有风吹模糊的效果。

转自:不详 作者:未知 关闭
加入收藏 推荐给好友 打印本文
内容为网上收集,并不代表本站同意或者赞同其观点,如果有任何版权,内容问题,请联系本站,我们将在第一时间处理.
查询
关键字
搜索范围
热点专题
服务
计算机资讯网 | 联系方式 | 广告服务 | 意见留言 | 友情链接 | 网站地图 | 设为首页