玩票儿 · 走神儿

一系列的Div＋CSS的文章，看上去有点像近期的工作总结，总结往往是小小收获，blog纪念。

近期工作之需又开始了DIV＋CSS的工作。网站改版中为了实现设计效果，遇到了一些问题，也因此学习了一些CSS特效技术，例如图片效果。

记得以前做过一些图片效果，好像是用js实现的，用mouseon设置半透明等特效，代码如下：

在图片属性中加入onmouseout="Fhidden()" onmouseover="Fpop()" class="alpha"，CSS中设置alpha：

.alpha {
filter:alpha(opacity=50);
cursor:hand;
}

其实实现图片透明效果，CSS也行，而且是渐变效果，代码如下：

.filter_pic{

filter:Alpha(opacity=0,finishopacity=80,style=1,startx=100,starty=0,finishx=0,finishy=0);

}

其中start和finishx，y分别为渐变发生的起始坐标，style值为1,2,3分别代表了linear，radial和rectangle三种透明渐变效果，这几种效果在作图的渐变颜色填充中常用，无需多解释了。

此外，CSS常见的滤镜有以下14种：

.Filter_1{filter:Alpha(opacity=0,finishopacity=80,style=1,startx=100,starty=0,finishx=0,finishy=0);}
   /*透明度：opacity:开始处的透明度。finishopacity:结束处的透明度。style:0为平均透明 1为线状透明 2为圆形透明 3为菱形透明 。startx,starty,finishx,finishy分别为滤镜覆盖区域的坐标*/
.Filter_2{filter:progid:DXImageTransform.Microsoft.blur(makeshadow=false,pixelradius=4);}/*模糊：makeshadow是否被处理为阴影；pixelradius模糊效果的作用深度；*/
.Filter_3{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true); }
/* 运动模糊：水平向右；add还有一个值为false；direction为方向；strength多少个像素被模糊。*/
.Filter_4{filter:chroma(color=FF6800);}/*透明色：变金黄色为白色。 但对这个例子图没用，因为他的颜色不统一*/
.Filter_5{font-size:80px;filter:dropshadow(color=#ffb6aa,positive=true,offx=9,offy=4);}
/*下落的阴影：投射阴影的颜色；offx为X的值；offy为Y的值；positive为true时为任何非透明的像素建立可见的投影（如GIF动画的透明）；false为全部投影；*/
.Filter2{filter:FlipH;}/*水平翻转*/
.Filter3{filter:FlipV;}/*垂直翻转，也可水平、竖直同时翻转filter:flipv fliph;*/
.Filter_7{ font-size:80px;color:#000;filter:glow(color=#ffb6aa,strength=6);}/*发光： strength发光的强度；图片也可以 */
.Filter4{filter:Gray;}/*灰度*/
.Filter6{filter:Invert;}/*反色*/
.Filter_10{filter:mask(color=#8888FF);}/* 遮罩：这个例子效果显示不出来；用有空白透明的GIF最能体现*/
.Filter8{filter:Shadow(color=#000000,direction=135);}/*阴影：direction为方向；*/
.Filter5{filter:Xray;}/* X射线：*/
.Filter_13_1{font-size:80px; font-weight:bold; font-family:黑体; filter:progid:DXImageTransform.microsoft.emboss(bias=0.5);}
.Filter_13_2{font-size:80px; font-weight:bold; font-family:黑体; filter:progid:DXImageTransform.microsoft.engrave(bias=0.5);}
/*凹凸两种效果的浮雕：bias为添加到滤镜的每种颜色的百分比*/
.Filter_14{filter:Wave(add=0,freq=7,strength=9,lightstrength=5,phase=5);}
/*波浪：add=1表示显示原对象；默认为0；即不显示原对象；也就是可以不写这个元素；freq为波纹的频率；strength振幅的大小；lightstrength波纹增强光的效果；phase正弦波开始偏移量；*/

当然有人也利用PNG图片特性实现类似效果（使IE浏览器支持PNG格式图片的透明效果），不过仍旧会遇到IE和FF兼容问题。接下来我们将进入解决CSS在IE6，IE7，Firefox下兼容的问题。