前端不会特效怎么办？用这个css属性玩转图片处理

一张图片在设计师的手中会变的与众不同，为什么这张图片放在前端手中就不能有作为呢？我要用代码把它敲出来！

到底是怎么办到的啊，下面就为大家介绍这个神器的cs3属性：filter

filter属性定义了元素的可视效果（如色相和饱和度），当然，一般该元素就是img标签啦。

用css属性，难免会查一下它的浏览器支持情况，直接上图

果然IE老哥还是照样不给面子，不过这不重要，其他浏览器兼容性还蛮ok。记得加-webkit-前缀哦~（为了演示方便，下面代码没有加兼容性写法）

好了，下面进入正文~

亮度 Brightness

亮度范围为0即整个图片为黑色，100%即图片的原始亮度，当大于100%时，图片就会变得更加明亮。

css代码

效果

100% | 50% | 150%

对比度 Contrast

像亮度滤镜一样，参数接受的值为大于或等于0。该滤镜控制CSS图像的深色和浅色部分之间的差异。值为0则是一张灰度图像，100%为原始图像，大于100%将进一步提高图像的对比度。

css代码

效果

100% | 50% | 150%

灰度 Grayscale

此滤镜会将我们的图像中的所有的颜色转换成一些灰色的阴影。 设置0％的值没有效果，100％的值会变成他们完全灰度。负值是不允许的。

css代码

效果

0% | 50% | 100%

饱和度 Saturate

设置0％将彻底从图像中删除所有颜色，而超过100％的值将使图像饱和。设置100％时看起来就像原始图像。负值是不允许的。

css代码

效果

0% | 100% | 150%

褐色Sepia

Sepia滤镜用于控制图片的褐色色调，也就是常见的将图片调为老照片效果。设置0%为原始图像，设置100%为老照片效果。

css代码

效果

0% | 50% | 100%

色相旋转Hue-rotate

Hue-rotate滤镜适用于色相旋转到图像的所有颜色。

设置0deg时没有效果，取值没有最大值，取值超过360deg时就相当于一个循环，也就是取90deg的效果跟取450deg的效果是一样的。

css代码

效果

0deg | 60deg | 210deg

反色Invert

反转的量取决于设置的值。设置0%的时候没有变换，设置100%的时候则反转所有颜色。

css代码

效果

0% | 60% | 100%

模糊Blur

也就是图片的高斯模糊度。用像素来表示。

css代码

效果

1px | 3px | 5px

想学习web前端的小伙伴们可以来我的前端学习交流群：675498134，群里有各路大神小白逗比，欢迎你的加入。