CSS滤镜应用技巧
2008-02-23 08:27:50来源:互联网 阅读 ()
常做网页的朋友们一定都知道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滤镜,使图片具有风吹模糊的效果。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash