CSS 滤镜 转

标签：

基本滤镜--可直接作用在对象上，并立即生效，主要有：

1).alpha--通道

2).blur--模糊

3)MotionBlur--移动模糊

4)Chroma--透明色

5)Drop Shadow--下落阴影

6)Flip--对称变换

7)Glow--光晕

8)GrayScale--灰度

9)Invert--反色

10)Mask--遮罩

11)Shadow--阴影

12)X-ray--X光效果

13)Emboss or Engrave--浮雕

14)Wave--波浪

高级滤镜--需配合JS等脚本使用，产生更绚丽的变幻效果 ，主要有

1)BlendTrans -- 渐隐变换

2)RevealTrans--变换

3)Light --灯光

alpha  filter:alpha(opacity=opacity,finishopacity=finishopacity,startX=startX,startY=startY,finishX=finishX,finishY=finishY);opacity: 透明度等级， 取值 0-100(0完全透明)

style: 透明区域的形状特征，取值 0,1,2,3
0-统一形状 1-线性 2--圆形放射渐变  3--矩形放射渐变
X,Y这种的为坐标参数了

来源：http://blog.csdn.net/oscar999/article/details/6817648

<!--==1.静态滤镜==-->

/*整个网页变灰*/

{filter:gray;}/*整个网页变灰*/

{filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);/*当值为 1 时以灰度显示对象,里面还可以添加其它属性*/}

{filter:invert;}/*整个网页反相*/

{filter:Xray;}/*x光照射*/

/*png 背景兼容Ie6写法*/

{background:url(h2-bg.png) no-repeat;

background:none\9;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="h2-bg.png");}

/*透明度*/

{opacity:0.3;/*支持火狐*/

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);/*透明度，里面可以添加的属性*/}

/*渐变色彩层*/

{filter : progid:DXImageTransform.Microsoft.Gradient (startColorStr=#00BBCCDD,endColorStr=#FFFF0000)}

/*模糊效果*/

{filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true,ShadowOpacity=0.1,pixelRadius=9)}

/*添加阴影效果*/

{filter:progid:DXImageTransform.Microsoft.DropShadow(color=#AAFF0000,positive=false,offX=4,offY=8);}

/*给对象添加光辉（即在边缘增加辉光）*/

{filter:progid:DXImageTransform.Microsoft.Glow(strength=5,color=#676767)}

<!--==2.动态滤镜==-->

/*切换效果(0到23钟)*/

{filter:revealTrans(transition=12,duration=5);}

/*模拟开关门*/

{filter:progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)}

/*国际象棋棋盘的网格推拉转换效果*/

{filter:progid:DXImageTransform.Microsoft.CheckerBoard(squaresX=15,squaresY=10,direction=left)}

/*模拟百叶窗的效果*/

{filter:progid:DXImageTransform.Microsoft.Blinds(bands=50,Direction=right)}

/*渐隐渐显的效果*/

{filter:progid:DXImageTransform.Microsoft.Fade()}

/*放射状擦除效果*/

{filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=radial);}

/*随机线条效果*/

{filter:progid:DXImageTransform.Microsoft.RandomBars()}

http://www.w3cplus.com/css3/ten-effects-with-css3-filter

黑白照片 filter: gray; 
X光照片 filter: Xray; 
风动模糊 filter: blur(add=true,direction=45,strength=30); 
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3); 
半透明效果 filter: Alpha(Opacity=50); 
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140); 
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200); 
白色透明 filter: Chroma(Color=#FFFFFF); 
降低色彩 filter: grays; 
底片效果 filter: invert; 
左右翻转 filter: fliph; 
垂直翻转 filter: flipv; 
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true); 
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3); 
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5); 
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

filter历史

其实这个filter是CSS1的属性了，但是因为老版本的IE4.0~IE9对此支持不怎么感冒，对浏览器的支持也不稳定，因此这个属性只能当做实验性技术来观察。但，对于想要探究IE的filter是怎样模拟像css3工作原理的同行不妨可以充充电。

此属性我个人概况为css PS化，为什么，因为它的很多属性或多或少是从PS衍伸进来的，如图

就连我们用css3来写一个华丽丽的转场动画时，我们也可以考虑让我们的ie同样具有此功能，那么ie中的filter就体现出来了。。

一、filter界面滤镜

在ie中 filter 分为静态滤镜(Visual Filters)和过渡转场(Transitions Reference)，前者是的效果可以设置元素的不透明度、渐变、模糊、对比度、明度等这些，后者注重的ie的动画效果。

对于在使用ie filter属性时，必要的前缀是需要的，对此ie在filter规范如下：

.test{
	filter:progid:DXImageTransform.Microsoft.    /*.后面都是紧跟着各种滤镜和转场函数*/
}

/*如：模糊滤镜*/
.blur{
	filter:progid:DXImageTransform.Microsoft.Blur()    /*.函数的开头第一个字母必须大写，括号()里面的滤镜的各种值*/
}

对于为什么要在开头写上progid:DXImageTransform.Microsoft 不是很清楚，估计是为了区分吧。有哪位知道麻烦贴个地址说一下哈。

1.AlphaImageLoader，这个属性是主要是针对png透明图片进行不透明度的处理，为什么要这么说呢，因为IE6的png透明图片其实是不透明的，显示会灰色背景。

语法：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘ , sizingMethod=‘‘ , src=‘mini.jpg‘)

其值包括2个可选值，一个必选值。

不妨用你的手中的IE6~8来预览一下官方demo→AlphaImageLoader

2.Gradient，渐变滤镜。

语法：

filter:progid:DXImageTransform.Microsoft.Gradient()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=‘ture‘,GradientType=‘1‘,StartColorStr=‘#00000000‘,EndColorStr=‘#FFFF3300‘)

不妨用你的手中的IE6~8来预览一下官方demo→Gradient Filter

稍有留意我们看了下面的style属性的时候其实就会发现，StartColorStr中的值跟我们平常的用到的#ffffff是不一样的，如图

写着写着发现这个 filter 属性很多，估计篇幅很大，那么就暂时分上下篇来写好了，不然篇幅实在过大，写的人都要挂了，何况看的人能这么蛋疼看下去？

二、filter静态滤镜

1.Alpha，调整对象内容的不透明度。

语法：

filter:progid:DXImageTransform.Microsoft.Alpha()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=‘ture‘,GradientType=‘1‘,StartColorStr=‘#00000000‘,EndColorStr=‘#FFFF3300‘)

Style，设置或者调整不透明度的风格。0代表默认值，1代表线性不透明，2代表径向渐变，3代表矩形渐变

Opacity，设置或调整不透明度值。0~100值，其中0默认值表示全透明，100为全不透明

FinishOpacity，设置或调整最后不透明度值。0~100值，其中0默认值表示全透明，100为全不透明

StartX，设置或调整水平不透明最开始位置，默认值为0，即从对象最左边开始。

FinishX，设置或调整水平不透明度结束位置，默认值为0

StartY，设置或调整垂直方向不透明度开始位置，默认值为0

FinishY，设置或调整垂直不透明度结束位置，默认值为0

不妨用你的手中的IE6~8来预览一下官方demo→Alpha Filter

2.BasicImage，调整对象的内容的颜色处理、图像旋转或不透明度。

filter:progid:DXImageTransform.Microsoft.BasicImage()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale=‘x‘, Xray=‘x‘, Mirror=‘x‘, Invert=‘x‘, Opcity=‘x‘, Rotation=‘x‘)

GrayScale ，设置或调整对象的灰度值。

Invert ，设置或调整对象的反相。

Opacity ，设置或调整对象的不透明度。

Mask ，设置或调整对象的的RGB是否为MashColor值，0默认值，显示正常RGB值，1表示改变内容为MashColor（不常用）

Mirror ，设置或调整对象镜像。0正常显示，1内容对象将翻过来。

Rotation ，设置或调整对象旋转，0正常显示，1代表旋转90°，2代表旋转180°，3代表旋转270°

XRay ，设置或调整对象的X射线，布尔值，0正常显示，1代表X射线，有点像我们去医院拍X光一样的效果。

不妨用你的手中的IE6~8来预览一下官方demo→BasicImage Filter

3.Blur，设置对象的模糊值。

filter:progid:DXImageTransform.Microsoft.Blur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=‘x‘, MakeShadow=‘x‘, ShadowOpacity=‘x‘)

PixelRadius，设置对象的模糊半径，1~100数值。

MakeShadow，设置对象是否投影，布尔值，true和false

ShadowOpacity，设置对象投影不透明度，0.0~1.0，假如MakeShadow为false那么该值无效。

不妨用你的手中的IE6~8来预览一下官方demo→Blur Filter

4.Chroma ，设置对象的色彩透明度

filter:progid:DXImageTransform.Microsoft.Chroma()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Chroma(Color=‘x‘)

Color，设置颜色值。

5.Compositor ，设置新对象内容的合成颜色，这个翻译有点拗口，大概的意思就是：2个对象，要显示哪个或者隐藏哪个，或者显示他们对比之后的新对象。

filter:progid:DXImageTransform.Microsoft.Compositor()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Compositor(function=‘‘)

6.DropShadow ，设置对象的投影效果。

filter:progid:DXImageTransform.Microsoft.DropShadow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=‘x‘, OffY=‘x‘, Color=‘x‘, Positive=‘x‘)

OffX，设置投影的X位移，单位数值，默认值为5

OffY，设置投影的Y位移，单位数值，默认值为5

Color，设置投影的颜色值

Positive，设置投影的透明或者非透明。

7.Emboss ，设置对象的浮雕效果。

filter:progid:DXImageTransform.Microsoft.Emboss()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Emboss(Bias=‘‘)

8.Engrave ，设置对象的雕刻效果。

filter:progid:DXImageTransform.Microsoft.Engrave()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Engrave(Bias=‘‘)

9.Glow ，设置对象的光晕效果。

filter:progid:DXImageTransform.Microsoft.Glow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Glow(color=‘‘, Strength=‘‘)

color，设置光晕颜色。

Strength，设置光晕的宽度，数值单位

10.Light ，设置对象的亮度

filter:progid:DXImageTransform.Microsoft.Light()

addAmbient，加入对象环境光

addCone ，加入锥形光源

addPoint 加入点光源

changeColor ，改变亮度颜色

changeStrength，改变亮度长度

clear，清除亮度

moveLight，移动光源焦点。

11.ICMFilter ，设置对象颜色内容改变，使其显示像打印设备的颜色。

官方无demo，IE9时，这个滤镜仅仅应用于屏幕内容显示效果上，当内容是打印时，将不应用。

12.MaskFilter ，设置对象内容透明或者非透明颜色。

filter:progid:DXImageTransform.Microsoft.MaskFilter()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.MaskFilter(Color=‘‘)

13.Matrix，调整大小、旋转或翻转使用矩阵的内容对象转换。

filter:progid:DXImageTransform.Microsoft.Matrix()

14.MotionBlur，设置对象模糊，测试完demo之后感觉有点像线性模糊，就是月光投射下来不均匀的模糊效果。

filter:progid:DXImageTransform.Microsoft.MotionBlur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.MotionBlur(Direction=‘‘,Strength=‘‘,Add=‘‘)

Direction，设置对象模糊方向，从0°~315°照射下来。

Strength ，设置对象模糊范围，单位数值，初始值为5

Add，设置图像模糊是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖

15.Wave，设置对象为波浪纹滤镜效果

filter:progid:DXImageTransform.Microsoft.Wave()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Wave(Add=‘‘, LightStrength=‘‘, Phase=‘‘, Strength=‘‘,  Freq=‘‘)

Add，设置滤镜是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖

LightStrength，亮度强度，0~100数值，数值越大滤镜效果越明显

Phase，相对偏移值，0~100数值

Strength，设置波浪强度，默认值为5，数值越大，波浪效果越明显。

Frep，设置波浪频率，默认值为3，数值越大，波浪效果越明显。

16.Shadow，设置对象阴影效果。

filter:progid:DXImageTransform.Microsoft.Shadow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Shadow(color=‘‘, Direction=‘‘, Strength=‘‘)

Color，设置阴影颜色。

Direction，设置阴影的方向，角度也是从0°~315°取值（跟PS的投影效果非常的相似。）

Strength，设置投影强度，数值越大越模糊。

来源：http://www.qianduan.net/guan-yu-ie-zhong-css-filter-lv-jing-xiao-zhi-shi.html

CSS 滤镜 转

标签：

原文地址：http://www.cnblogs.com/wenhuan/p/4287376.html