CSS中的Filter样式特效1 -

feng2qin

浏览: 15212 次
性别:
来自: 武汉

最近访客更多访客>>

挚天使

GYL_1527

芝士大咖

superyouyo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS中的Filter样式特效1

博客分类：

css html 浏览器 ie

CSS中的Filter样式特效1

　　从IE 4.0版开始，就提供了一些内置的多媒体滤镜特效，正是由于这些基于CSS的样式属性的控制，于是我们在编写网页的时候，即使我们不用图片，也可以使我们的文字，图片，按钮或是DIV标识鲜艳无比，充满生气，从而为自己的网页增加了比较美妙的视觉效果。下面，我们就来看看CSS的Filter样式。这里，即使你没有CSS这方面的知识，相信以下的内容也不会很难懂的。当然，首先，我默认你已经学过HTML，并且还能做网页，最好是还知道一点Scripts语句。由于各种浏览器对CSS的支持的原因，我建议你使用IE4.0以上版的浏览器，强烈建议你使用IE5.0版，这样，你就会毫不费力地看到所有的特效。
　　一、建立Filter样式

　　Filter既然是CSS样式表中的一员，那么它就可以像其它样式的定义和应用方式一样，可能直接定义在职HTML标识的<head>和</head>只间。其语法结构为：

filter：名称(参数及其值)

　例如：imgblur { filter : Blur( strength=30 ) }

　当然，它也可以通过Style标识定义在HTML的标识里面，如：

<Image ID=test SRC="test.gif" Style="Filter : Blur( Strength=30 )">

　　以上就是使用CSS中filter样式的使用方法，其实这和其它CSS的样式定义方式一样，分为外部引用、内部引用和局部引用三种，上面的第一种是内部引用，第二种是局部引用，外部引用则要先建立一个CSS的文件，然后用<link rel=StyleSheet type="text/css" href="样式文件的URL">来嵌入HTML文件。有关CSS的定义方式，请大家参考网页陶吧里的相关文章。

　　Filter样式属性允许一次设定多个滤镜效果，也就是说，可以让一个HTML的元件同时拥有多个滤镜的的效果。例如：
…… ……
　　　　　　<img id=image1 src="test.jpg" border="0">
　　　　　　<img id=image2 src="test.jpg" border="0" style="filter : blur ( Strength=30 ) flipv()">
…… ……

　　在以上的例子中，ID为image1的图片是正常显示的图片，而ID为image2的图片则同时应用了模糊（Blur）和上下颠倒（Filpv）两种滤镜。以下是同一图片的两种效果：（得用IE4.0以上版的浏览器浏览）

　　怎么样，还行吧，这里要请大家注意几点:

　　1、如果使用多的滤镜，那么滤镜间要以空格分开。

例如：

<img src="test.jpg" style="Filter: alpha(opacity=30) Blur(amount=10)">

　　2、一个滤镜中的若干参数以逗号分隔。

例如：

<img src="test.jpg" style="filter : blur(amount=30,strength=50)">

　　3、Filter和其他的CSS样式则以分号分开。

例如：

<img src="test.jpg" style="filter: blur(amount=30) ; Position: relative">

　　接着，我们来看看Filter到底有哪些滤镜。

二、静态滤镜的种类

　　视觉效果的滤镜。在IE4.0以上版中，支持以下14种滤镜：

滤镜名           说明
Alpha             让HTML元件呈现出透明的渐进效果
Blur              让HTML元件产生风吹模糊的效果
Chroma            让图像中的某一颜色变成透明色
DropShadow        让HTML元件有一个下落式的阴影
FlipH             让HTML元件水平翻转
FlipV             让HTML元件垂直翻转
Glow              在元件的周围产生光晕而模糊的效果
Gray              把一个彩色的图片变成黑白色
Invert            产生图片的照片底片的效果
Light             在HTML元件上放置一个光影
Mask              利用另一个HTML元件在另一个元件上产生图像的遮罩
Shadow            产生一个比较立体的阴影
Wave              让HTML元件产生水平或是垂直方向上的波浪变形
XRay              产生HTML元件的轮廓，就像是照X光一样
　　这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。一般而言，用得最多的是图片和文字。那么，就让我们来看看各个滤镜中有些什么样的参数和效果。

三、Alpha 滤镜

参数名                       说明                          取值说明

Opacity              不透明的程度，百分比。          从0到100，0表是完全透明                                                                                   /                                                 100表示完全不透明。
FinishOpacity       这是一个同Opacity一起使         从0到100，0表是完全透
                     用的选择性的参数，               100表示完全不透明。
                     当同时Opacity和
                    FinishOpacity时
                     ，可以制作出透明渐进的效果
                         ，比较酷。

Style

当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 0：没有渐进；1：直线渐进；
2：圆形渐进；3：矩形辐射。
StartX

渐进开始的 X 坐标值
StartY

渐进开始的 Y 坐标值
FinishX

渐进结束的 X 坐标值
FinishY

渐进结束的 Y 坐标值
　　看一下下面的演示，你就知道了：

　　　　<table>
　　　　<tr>
　　　　<td>原图</td>
　　　　<td>Style=0</td>
　　　　<td>Style=1</td>
　　　　<td>Style=2</td>
　　　　<td>Style=3</td
　　　　<tr></tr>
　　　　<td><img src="test.jpg"></td>
　　　　<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=0"></td>
　　　　<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=1"></td>
　　　　<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=2"></td>
　　　　<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=3"></td>
　　　　</tr>
　　　　</table>

0
顶

0
踩

分享到：

在applet调用js时出现错误(已解决) | 官方spring-framework-3.2.1.jar

2013-08-21 22:38
浏览 1523
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS中的Filter样式特效1

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS中的Filter样式特效1

评论

发表评论

相关推荐

最近访客更多访客>>