常做网页的朋友们一定都知道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滤镜,使图片具有风吹模糊的效果。 |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 01:39 , Processed in 0.139341 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.