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个可选值,一个必选值。
属性 | 特性 | 描述 |
---|---|---|
enabled | Enabled |
可选值,Boolean布尔值,默认值为ture,启用过滤器;false为不启用过滤器。所有的filter都有该属性值,下面不一一多说。 |
sizingMethod | sizingMethod |
可选值,设置或检索的方式来显示一个图像在对象边界显示方式。有三个值: |
src | src |
必须值,引入图片。 |
不妨用你的手中的IE6~8来预览一下官方demo→AlphaImageLoader
2.Gradient,渐变滤镜。
语法:
filter:progid:DXImageTransform.Microsoft.Gradient() /*完整写法*/ filter:progid:DXImageTransform.Microsoft.Gradient(enabled=‘ture‘,GradientType=‘1‘,StartColorStr=‘#00000000‘,EndColorStr=‘#FFFF3300‘)
属性 | 特性 | 描述 |
---|---|---|
enabled | Enabled |
可选值,Boolean布尔值,默认值为ture,启用过滤器;false为不启用过滤器。 |
StartColorStr | StartColor |
设置或者检索开始不透明度的梯度值,整数型Integer,指定一个整数型值,值的变化从0 (transparent[透明]) to 4294967295 ([白色不透明]). |
StartColorStr |
设置或者检索开始的颜色值,string类型字符串,值从#FF000000 到 #FFFFFFFF,默认值为:#FF000000,比如一个值为:#AARRGGBB ,那么AA代表透明度alpha,RR表示红色16进制值,GG表示绿色16进制值,BB表示黑色16进制值。 |
|
EndColor |
设置或者检索结束不透明度的梯度值,同上,很少用。 |
|
EndColorStr |
设置或者检索结束的颜色值,同上 |
|
GradientType |
设置渐变的方向。有两个值,1代表水平方向,0代表垂直方向渐变。 |
不妨用你的手中的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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。