CSS 滤镜详解
一篇文章带你了解CSS3滤镜（Filters）——上篇
一篇文章带你了解CSS3滤镜（Filters）——上篇回复“前端”即可获赠前端相关学习资料今日鸡汤朝辞白帝彩云间，千里江陵一日还。
CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。
一、模糊效果像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。
此函数接受CSS长度值作为定义模糊半径的参数。
较大的值将产生更多的模糊。
如果未提供参数，则使用值0。
例：•••••••••••••img.blur { -webkit-filter: blur(2px); /* Chrome, Safari, Opera */ filter: blur(2px);}img.extra-blur { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);}/* Some CSS tobeautify this example */table td{ padding: 10px; text-align: center;}运行结果：二、设置图像亮度brightness()功能可用于设置图像的亮度。
值为0%将创建全黑的图像。
而值100%或1使图像不变。
其他值是效果的线性乘数。
还可以将亮度设置为高于100％，这样可以使图像更亮。
如果缺少数量参数，则使用值1。
不允许使用负值。
例：•••••••••••••••••••••••<style>img {width: 200px;height: 100px;}img.blur {-webkit-filter: blur(2px);/* Chrome, Safari, Opera */filter: blur(2px);}img.extra-blur {-webkit-filter: blur(5px);/* Chrome, Safari, Opera */filter: blur(5px);}/* Some CSS to beautify this example */table td {padding: 10px;text-align: center;}</style>运行结果：注意：75%接受以百分号表示的值（例如）的过滤器函数也接受以十进制表示的值（如0.75）。
css滤镜的使用方法
CSS滤镜的使用方法CSS滤镜的使用方法：filter:filtername(parameters) 即filter:滤镜名称（参数）alpha：设置透明层次blur：创建高速度移动效果，即模糊效果chroma：制作专用颜色透明DropShadow：创建对象的固定影子FlipH：创建水平镜像图片FlipV：创建垂直镜像图片glow：加光辉在附近对象的边外gray：把图片灰度化invert：反色light：创建光源在对象上mask：创建透明掩膜在对象上shadow：创建偏移固定影子wave：波纹效果Xray：使对象变得像被x光照射一样具体的应用有两种方法：1、先定义好CSS ，再在页面中需要的对象上使用预先定义好的CSS，实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了，我们只需填上适合的具体参数即可：2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。
A, Alpha”滤镜: 听到这个名字，你可能会想到Flash里有，Photoshop里也似乎见过。
一点不错，它们的作用基本类似，就是把一个目标元素与背景混合。
你可以指定数值来控制混合的程度。
这种“与背景混合”通俗地说就是一个元素的透明度.语法：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或3StartX：任意值StartY：任意值例子：filter:Alpha(Opacity=”0″,FinishOpacity=”75″,Style=”2″)B,滤镜:是CSS的滤镜之一，把它加载到文字上，可产生立体字的效果，这将为你在网页上使用立体字做标题带来了极大的方便，也为你的网页减轻了分量；把Blur滤镜加载到图片上，能使你的图片增色不少，虽然用图象处理软件也能达到同样效果，但用Blur滤镜可方便多了. 语法：STYLE=”filter:Blur(Add = add, Direction = direction, Strength = strength)”说明：Add：一般为1，或0。
CSS滤镜知识点
CSS滤镜知识点CSS滤镜是一种应用于HTML元素的视觉效果工具，通过改变元素的颜色、亮度、对比度等属性，能够实现各种各样的效果。
在本文中，我们将深入探讨CSS滤镜的相关知识点。
一、CSS滤镜简介CSS滤镜是一系列用于改变HTML元素的呈现方式的特效。
通过对图像或元素应用一系列滤镜效果，我们可以改变其外观和视觉效果，从而创造出更加丰富多样的界面效果。
二、常用的CSS滤镜属性1. filter属性filter属性是应用滤镜效果的关键属性，通过给元素添加filter属性来应用滤镜效果。
具体的滤镜效果是通过filter函数来定义的。
2. blur滤镜blur滤镜用于给元素添加模糊效果。
可以通过设置模糊半径来控制模糊程度，半径越大，模糊程度越高。
3. brightness滤镜brightness滤镜用于调整元素的亮度。
可以通过设置亮度的百分比来控制亮度的变化，例如brightness(150%)表示将元素的亮度增加50%。
4. contrast滤镜contrast滤镜用于调整元素的对比度。
可以通过设置对比度的百分比来控制对比度的变化，例如contrast(200%)表示将元素的对比度增加100%。
5. grayscale滤镜grayscale滤镜用于将元素转换为灰度图像。
可以通过设置灰度的百分比来控制灰度的变化，例如grayscale(50%)表示将元素的灰度程度设置为50%。
6. sepia滤镜sepia滤镜用于将元素转换为复古风格的棕色色调。
可以通过设置棕色的百分比来控制棕色的变化，例如sepia(80%)表示将元素的棕色程度设置为80%。
7. saturate滤镜saturate滤镜用于调整元素的饱和度。
可以通过设置饱和度的百分比来控制饱和度的变化，例如saturate(200%)表示将元素的饱和度增加100%。
8. hue-rotate滤镜hue-rotate滤镜用于旋转元素的色相。
可以通过设置旋转角度来控制色相的变化，例如hue-rotate(90deg)表示将元素的色相顺时针旋转90度。
CSS滤镜属性
CSS滤镜之alpha属性Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。
Style参数指定了透明区域的形状特征。
其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。
StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
blur属性blur属性有三个参数：add、direction、strength。
Add参数有两个参数值：true和false。
意思是指定图片是否被改变成模糊效果。
Direction参数用来设置模糊的方向。
模糊效果是按照顺时针方向进行的。
其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。
角度方向的对应关系见下表：Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。
默认值是5像素。
CSS滤镜:Glow属性Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。
CSS滤镜:Dropshadow属性Dropshadow滤镜有四个参数，它们的含义为：“Color”：代表投射阴影的颜色。
“offx”和“offy”：分别是X方向和Y方向阴影的偏移量，它必须用整数值，如果是正整数，那么表示阴影向X轴的右方向和Y轴的下方向。
若是负整数值，阴影的方向正好相反。
另外“offx”和“offy”数值的大小决定了阴影离开对象的距离；“Positive”参数：如果为“true（非0）”，那么就为任何的非透明像素建立可见的投影。
如果为“fasle（0）”，那么就为透明的像素部分建立投影效果。
Dropshadow滤镜对一般图片无效，但我们把图片放到表格中，再给表格的<td>加载Dropshadow滤镜，将会产生一种图片有了立体边框的效果。
CSS3中filter（滤镜）属性使用详解
CSS3中filter（滤镜）属性使⽤详解最近在修改内⽹门户的时候，恰好遇到了需要使⽤滤镜的地⽅；刚开始⽤的是两张图⽚；⿏标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致⿏标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。
所以顺便学习了⼀下常⽤的滤镜效果。
使⽤滤镜：前⾔css3的滤镜filter属性，可以对⽹页中的图⽚进⾏类似Photoshop图⽚处理的效果，通过css对图像进⾏处理。
浏览器⽀持情况：只有IE浏览器不⽀持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。
常⽤属性使⽤语法：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() |saturate() | sepia() | url();CSS 滤镜可以给同个元素同时定义多个，例如 filter: contrast(150%) brightness(1.5) ，但是滤镜的先后顺序不同产⽣的效果也是不⼀样的；默认值为： initialinherit 表⽰从⽗级继承。
注意:滤镜通常使⽤百分⽐ (如：75%), 当然也可以使⽤⼩数来表⽰ (如：0.75)。
normal 正常未添加滤镜<div data-filter="image-normal"><h2>normal</h2><img src="1.jpg"></div>grayscale 灰阶将图像转换为灰度图像。
值定义转换的⽐例。
值为100%则完全转为灰度图像，值为0%图像⽆变化。
若未设置，值默认是0。
也可以写0-1之间的⼩数。
<div data-filter="image-grayscale"><h2>grayscale</h2><img src="1.jpg"></div>//值为0-1之间的⼩数, grayscale(0) 原图；grayscale(1）完全变成灰⾊；[data-filter=image-grayscale] img {filter: grayscale(50%);-webkit-filter：grayscale(50%); /* Chrome, Safari, Opera */}saturate 饱和度值为0时显⽰⿊⽩⾊，值为0.5时饱和度为原图的⼀半，值为1时，表⽰饱和度等于原图，数值⼤于1表⽰饱和度加强。
CSS滤镜的应用ppt课件
finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效 果，它的值也是从0~100；
style参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代 表圆形放射渐变、3代表矩形放射渐变。当style为2或3时，startX和startY等坐 标参数便没有意义，都是以图片中心为起始，四周为结束。
其中color属性设置阴影的颜色，direction属性设定阴影的方向。
源码见实例10-11.html
十三、X射线（X-ray）
Xray滤镜的效果是给图片添加X光照射的感觉，表达式如下： filter:Xray;
源码见实例10-12.html
十四、浮雕纹理（Emboss和Engrave）
在css滤镜中有两个滤镜都能够提供类似浮雕的效果，它们分别是 Emboss滤镜和Engrave滤镜，两个不同之处在于Emboss产生凹陷的浮雕 效果，而Engrave则产生凸出的浮雕效果，其语法分别如下所示：
值大的则产生高亮滤光效果。对于高对比度的图片而言，该值对滤镜的结果影 响较小。
十四、浮雕纹理（Emboss和Engrave）
源码见实例10-13.html
十五、波浪（Wave）
Wave滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对 象按照竖直的波纹样式打乱，其表达式为：
filter:wave(add=1或0,freq=数值,lightstrength= 0~100,phase= 0~100,strength=数值);
源码见实例10-05.html 注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果
七、翻转变幻（Flip）
Flip滤镜的使用非常简单，没有任何参数，fliph代表水平翻转，flipv 代表垂直翻转，表达式分别为：
第4章滤镜
注： makeshadow值取false时按正常色彩显示对象；值取true时对象内容不作 模糊处理，而是将对象内容转化为黑色，并添加模糊效果，再利用 shadowopacity控制阴影的透明度。
2）运动模糊MotionBlur
filter: progid:DXImageTransform.Microsoft. MotionBlur (add=…, direction=…, strength=…);
</body></html>
5. 波浪Wave
Wave使文字或图像产生纵向或横向的波浪效果。
定义格式：
Filter: wave ( add=…, freq=…, lightstrength=…, phase=…, strength=… ); Add：可取0或1，0表示不显示原对象，1表示显示原对象 Freq：产生波纹的频率，即对象一共要产生多少个完整的波纹 Lightstrength：增强光效果，取值0~100 Phase：正弦波开始的偏移量，通常取0。
CSS补充 —— 滤镜
1. 滤镜简介 2. Alpha滤镜 3. 模糊和运动模糊 4. 对称变换Flip 5. 波浪Wave 6. 其它效果简介
1. 滤镜简介
滤镜不符合CSS标准，是微软公司为增强浏览器功能而特意 开发的，并整合在IE浏览器中的一类功能的集合。 滤镜分为基本滤镜和高级滤镜。
基本滤镜通常指可以直接作用在对象上，能立即生效的滤镜。 主要有以下几种类型： 通道Alpha、对称变换Flip、波浪Wave； 模糊效果Blur、运动效果MotionBlur； 透明色Chroma、灰色Gray、反色Invert； 下落阴影DropShadow、阴影Shadow、光晕Glow、遮罩 Mask； X光效果Xray、浮雕Emboss、Engrave。
第12章 CSS滤镜
•
介绍滤镜概述
•
介绍常用CSS滤镜
12.1 滤镜概述
• 最早的滤镜概念来自于摄影业，通常指安装在相机镜头前用于过滤 自然光的附加镜头。所以最早的滤镜是为了实现照片的某些特殊效 果而出现的附加镜头。后来在图片处理软件如photoshop中也有了滤 镜的概念，PS中的滤镜主要是用来实现图像的各种特殊效果。它在 Photoshop中具有非常神奇的作用。滤镜通常需要同通道、图层等联 合使用，才能取得最佳艺术效果。
• 而网页中的滤镜并不是浏览器的插件，也不符合CSS标准，而是微 软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的功能 的集合。由于IE浏览器有着很广的使用范围，因此CSS滤镜也被广 大设计者所喜爱。
12.2 常用CSS滤镜
• 上一节简要介绍了什么是网页滤镜以及其语法格式，本节来介绍一 下常见的滤镜种类。主要讲述以下滤镜：透明层次滤镜（alpha）、 颜色透明滤镜（chroma）、模糊滤镜（blur）、固定阴影滤镜 （dropshadow）、移动阴影滤镜（shadow）、光晕滤镜（glow）、 灰度滤镜（gray）、反色滤镜（invert）、镜像滤镜（flip）、遮罩 滤镜（mask）、X射线滤镜（x-ray）、和波纹滤镜（wave）。
• 注意：Direction的取值范围是0到315度。strength参数值代表有多少 像素的宽度将受到模糊影响，只能使用整数来设置，其默认值是5 像素。
12.2.4 固定阴影滤镜（dropshadow）
• 有时候为产生阴影，又需要不能模糊主体对象，这时候我们就会用 固定阴影滤镜dropshadow，以下是dropshadow的通用语法：
/*透明的变化方式*/
• startX=d,
/*开始变化的X轴起点*/
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS 滤镜详解
关键字: css 滤镜
CSS样式表是一种为超文本标签语言提供增强补充服务的技术，可对每一
个html的标签做精雕细刻的修饰。
只用html制作的网页，对页面内各部分的修饰能力有限且语句烦锁，样式表正是弥补这一缺陷的有力技术，它语句文法简单，只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能，使网页更加生动活泼，从而获得满意的效果。
当然，样式表的强大还依靠的就是它的滤镜功能。
因为有了滤镜，大家就可以轻易地创造出“专业”的艺术效果。
为了能帮助大家高效使用好样式表滤镜，笔者将对样式表滤镜各方面的内容进行详细介绍。
一、什么是样式表滤镜
说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。
样式表滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。
如果大家有一些脚本语言的基础，能够把滤镜效果与类似javascript的脚本代码做一些结合，就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。
现在能使用的滤镜有13个之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式表滤镜效果。
二、常用的样式表滤镜
随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。
如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。
在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。
为了使大家能有针对性地使用滤镜，下面就把一些常用滤镜的功能和参数详细介绍如下：
1、α滤镜
作用：该滤镜可以实现各种溶入效果，如果大家将该滤镜与网页脚本语言结合起来，对滤镜的参数进行处理的话，就能很轻易地做出淡入淡出的效果来。
语法：{FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity，style=style，startx=startx，starty=starty，finishx=finishx，
finishy=finishy)}
参数：Opacity参数代表图象的起始透明度，其默认的数值是从0到100，0代表完全透明，100代表完全不透明；FinishOpacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度，作用范围也是0到100；Style表示透明区域的形状特征，其中“0”代表统一形状，“1”代表线形。
“2”代表放射状，“3”代表矩形；startx表示渐变透明效果开始处的X坐标，starty代表渐变透明效果开始处的Y坐标，finishx代表渐变透明效果结束处的X坐标，finishy代表渐变透明效果结束处的Y坐标。
2、模糊滤镜
作用：该滤镜主要是让图象产生一种模糊效果。
语法：{filter:blur(add=add，direction=direction，strength=strength)}
参数：该滤镜主要包括三个参数，其中add是用来指定图象是否被改变成印象派的模糊效果，模糊效果是按顺时针的方向进行的，它的数值应该是ture或false；direction参数是用来设置模糊的方向的，其中0度代表垂直向上，每45度为一个单位，默认值是向左的270度；strength 参数代表有多少像素的宽度将受到模糊影响，缺省的参数值是5个像素，而且该参数值只能使用整数来指定。
3、斜影滤镜
作用：该滤镜主要是为对象建立轮廓的影子效果的，它可以在指定的方向建立物体的投影；
语法：{filter:shadow(color=color,direction=direction)}
参数：斜影滤镜只有两个参数，其中color代表投影的底色，该数值是用英文字母来代替的，例如投影底色是红色的话，就应该设置color=red;direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值每45度为一个单位，它的默认值是向左的270度。
4、发光滤镜
作用：该滤镜可以给图象或者文字产生一种发光效果；
语法：{filter:glow(color=color,strength=strength)}
参数：该滤镜的color参数与阴影滤镜的color参数功能几乎是一样的，不过这
里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的，
其值为1到255之间的任何整数。
5、灯光滤镜
作用：灯光滤镜是模拟光源来投射文字或者图象，使图象和文字能产生一定的投
射效果；
语法：{filter:light}
参数：一旦为对象定义了“light"滤镜属性后，大家就可以调用它的“方法(Method)"来设置或者改变属性，该滤镜可用的方法有：AddAmbient方法是用来
加入包围光源的，AddCone方法是用来加入锥形光源的，MoveLight方法是用来
移动光源的，Changstrength方法是用来改变光源强度的，Changcolor方法是用
来改变光的颜色的，Clear方法是用来清除所有光源的。
6、遮罩滤镜
作用：该滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看
物体一样。
语法： {filter:mask(color=color)}
参数：该滤镜的color参数表示覆盖对象表面的颜色，例如如果遮罩颜色为绿色，那么就应该设置color=blue。
7、阴影滤镜
作用：阴影滤镜就是给对象添加阴影效果，其工作原理是建立一个偏移量，加上
色彩。
语法：
{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)} 参数：该滤镜中的Color参数表示投射阴影的颜色，offx 表示水平方向阴影的
偏移量，offy 表示竖直方向阴影的偏移量，Positive参数是一个布尔值，其数
值如果为TRUE，就为任何的非透明像素建立可见的投影，如果为FASLE，就为透
明的像素部分建立透明效果。
8、灰度滤镜
作用：该滤镜主要是将图象对象转换成灰度形式显示。
语法：{filter:gray}
参数：该滤镜没有参数。
9、翻转滤镜
作用：翻转滤镜主要是实现图象对象的水平或者竖直翻转效果。
语法：{filter:filph} {filter:filpv}
参数；这种滤镜也不带参数，其中{filter:filph}是实现水平翻转的，{filter:filpv} 是实现竖直翻转的。
10、X光滤镜
作用：X光滤镜可以让对象反映出它的轮廓并把这些轮廓加亮。
语法： {filter:xray}
参数：该滤镜本身不含有参数。
11、倒置滤镜
作用：使用该滤镜可以把包括色彩、饱和度、和亮度值等对象的可视化属性全部翻转。
语法： {filter:invert}
参数：该滤镜没有参数。
12、波纹滤镜
作用：波纹滤镜可以在水平和竖直方向利用正弦波打乱图象，使图象产生水波效果。
语法：
{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,str ength=strength)}
参数：该滤镜的add参数是一个布尔数值，它是用来表示是否要把对象按照波形样式打乱；freq参数是用来设置波纹频率的，也就是指定在对象上一共需要产生多少个完整的波纹；lightstrength参数可以设置波纹光影的增强效果的，其数值范围在0到100之间；phase参数是用来设置正弦波的偏移量的，strength 是设置正弦波的振幅大小的。