到对图片进行处理，我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图片显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。

你以为这些是经过PS软件处理出来的？不不不，只有一张图片,纯粹的是用css写出来的。

本文的目标就是：手把手教大家学习CSS滤镜（filter）属性,CSS滤镜提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。

使用CSS滤镜只需要如下5步:

1. 准备工作

2. 使用sublime快速书写HTML结构

3. 使用CSS选择器选中目标标签

4. CSS滤镜的基本用法

5. CSS滤镜实例演示

一、第一步 —— 准备工作

目标 : 下载并安装sublime以及准备一张图片素材

下载对应你操作系统的sublime编辑器，http://www.sublimetext.com/3

图片素材:

小结 : 准备好代码编辑器,比如sublime,hbuilder,vscode等编辑,都是可以的,再准备一张图片素材

二、第二步 —— 书写HTML结构

目标 : 使用sublime编辑器快速生成HTML5结构的页面

1. 安装sublime以后，并打开sublime.exe

2. 在电脑的某个目下新建一个空目录code，将我们的图片素材放一个images文件夹下，并把这个images文件夹也放在code中

3. 使用sublime打开我们刚准备好的code文件夹

4. 使用sublime新建一个HTML网页文件,后缀名需要为html

5. 接着输入一个英文输入状态下的!再按tab键,即可快速生成HTML5的基本结构!

6. 在网页中插入内容

小结 : 使用代码编辑器新建网页文件,并加入两张img图片标签,正确引入图片

三、第三步 —— 使用CSS选择器选中目标标签

目标：使用CSS类选择器选中我们页面中的目标图片标签, 格式 .类名

小结 : 使用 css类选择 格式: .类名 选中对应的目标标签

四、第四步 —— CSS滤镜的基本用法

目标：了解CSS滤镜的基本用法以及各方法之间效果差异

1. CSS滤镜基本语法

filter: function(param);

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;

提示:允许同时使用多个滤镜，多个滤镜效果之间使用空格分隔。

2. CSS滤镜支持的方法（function）有

– grayscale 灰度

– sepia 褐色

– saturate 饱和度

– hue-rotate 色相旋转

– invert 反色

– opacity 透明度

– brightness 亮度

– contrast 对比度

– blur 模糊

– drop-shadow 阴影

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

filter是css3的一个属性，大家应该都很少用到，很多人只是知道有这个属性。Webkit率先支持了这几个功能，不过现在大部分浏览器也都做了兼容性，下面大家就一起来学习吧。

参数语法

现在规范中支持的效果有：

语法

-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);

示例

无效果filter:none;

模糊filter:blur(10px);

灰度filter:grayscale(0.5);

亮度filter:brightness(0.5);

对比度filter:contrast(2.6);

饱和度filter:saturate(7.9);

色相旋转filter:hue-rotate(260deg);

反色filter:invert(0.9);

阴影filter:drop-shadow(10px 10px 10px #000);

组合

最后大家看看几种组合效果

是不是感觉美美哒了，美女换了身衣服，皮肤也变得红润了，头发唇彩等都变了。前端也可以用代码P出好看的图片，是不是很厉害？

上面的效果代码：

filter:saturate(1.9) contrast(.6) hue-rotate(320deg);

公告

喜欢小编的点击关注，了解更多知识！