这几天,几乎所有的网站都变成了灰色。
有的是修改了很多东西变灰的,有的只是在CSS里简单加了个CSS滤镜,如下所示。
body {}{
filter: Gray;
}
加了这个CSS滤镜代码,明显感觉到页面打开变慢。
我从网上找了一些CSS滤镜的介绍:
语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
[size=-1]滤镜说明.

alpha:设置透明层次

blur:创建高速度移动效果,即模糊效果

chroma:制作专用颜色透明

DropShadow:创建对象的固定影子

FlipH:创建水平镜像图片

FlipV:创建垂直镜像图片

glow:加光辉在附近对象的边外

gray:把图片灰度化

invert:反色

light:创建光源在对象上

mask:创建透明掩膜在对象上

shadow:创建偏移固定影子

wave:波纹效果

Xray:使对象变得像被x光照射一样
1、滤镜:Alpha
语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明:

Opacity:起始值,取值为0~100, 0为透明,100为原图。

FinishOpacity:目标值。

Style:1或2或3

StartX:任意值

StartY:任意值

例子:filter:Alpha(Opacity=
"0",FinishOpacity=
"75",Style=
"2")
2、滤镜:blur
语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明:

Add:一般为1,或0。

Direction:角度,0~315度,步长为45度。

Strength:效果增长的数值,一般5即可。

例子:filter:Blur(Add=
"1",Direction=
"45",Strength=
"5")
3、滤镜:Chroma
语法:STYLE="filter:Chroma(Color = color)"
说明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
4、滤镜:DropShadow
语法:STYLE="filterropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值。
Offy:Y轴偏离值。
Positive:1或0。
例子:filterropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜:FlipH
语法:STYLE="filter:FlipH"
例子:filter:FlipH
6、滤镜:FlipV
语法:STYLE="filter:FlipV"
例子:filter:FlipV
7、滤镜:glow
语法:STYLE="filter:Glow(Color=color, Strength=strength)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、滤镜:gray
语法:STYLE="filter:Gray"
例子:filter:Gray
9、滤镜:invert
语法:STYLE="filter:Invert"
例子:filter:Invert
10、滤镜:mask
语法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
11、滤镜:shadow
语法:filter:Shadow(Color=color, Direction=direction)
说明:
Color:#rrggbb格式。
Direction:角度,0-315度,步长为45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜:wave
语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜:Xray
语法:STYLE="filter:Xray"
例子:filter:Xray[/size]
下面是一个CSS滤镜的小例子(应该只能在IE里看到效果):

点击展开示例
<html>
<head>
<title>CSS滤镜</title>
<style type="text/css">
.white {}{color:#FFFFFF; cursor:pointer;};
</style>
<script type="text/javascript">
// Flash table Extension for Dreamwever ,by dio([email]diopex@sina.com[/email])
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>
</head>
<body>
<table cellSpacing="1" cellPadding="1" style="height:30px;width:600px;text-align:center;background-color:#000033;">
<tbody>
<tr>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#00ccff;" ><span class="white">导航栏一</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff9900;" ><span class="white">导航栏二</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff3399;" ><span class="white">导航栏三</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#33ff66;" ><span class="white">导航栏四</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff0000;" ><span class="white">导航栏五</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ffff00;" ><span class="white">导航栏六</span></td>
</tr>
</tbody>
</table>
</body>
</html>