我们通常会通过PS，美图秀秀等来编辑照片，制作比较符合意境的的效果图片(图骗)，但是编辑器和PS的切换是有成本的，如果能在编辑器中快捷并且批量的处理图片岂不是很好。这篇文章没有多么高深的代码，只是一些平时容易忽略并且很受用的小技巧。

修图利器之 CSS Filters

P图怎么能少了滤镜呢，css提供了很多种滤镜：

1. drop-shadow
2. sepia
3. blur
4. hue-rotate
5. invert
6. brightness
7. contrast
8. opacity
9. grayscale
10. saturate

drop-shadow 下落式阴影

添加阴影效果可不只有text-shadow和box-shadow哦，text-shadow是为文字添加阴影，box-shadow给一个元素添加阴影，drop-shadow在图片是非png情况下和box-shadow有些相似,然而png图片才是她大放异彩的地方

拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的区别：

//从左往右依次是原图，添加drop-shadow-jpg，添加box-shadow.drop-shadow-jpg{    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));}.box-shadow{    box-shadow: 10px 10px 10px rgba(255,235,59,0.74);}

drop-shadow明显更柔和一些，并且图片的上面和左边也是有阴影的哦。

再来看下drop-shadow在png图片的表现吧，左边为原图：

.drop-shadow-png{    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));}

因为png图片背景是透明的，所以drop-shadow直接作用于图片的内容，图中的小女孩是不是更萌了呢。

sepia 乌贼墨，深褐色，深棕色影

如果想要个老照片效果

.sepia-50{    -webkit-filter: sepia(50%);}.sepia-100{   -webkit-filter: sepia(100%)} //safari浏览器不支持

参数可以是小数也可以是百分比，为0的时候是左边原图的效果，1或100%是最右的效果图哦

blur 模糊

背景图片太清晰有喧宾夺主之嫌了？可以设置模糊的效果啊

.blur{    -webkit-filter: blur(3px);}

blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，这个值设置为百分比除外的css长度值，默认是0效果为左边的原图，值越大越模糊，上面的图片设置成100px时就什么都没有了。

opacity 透明度

opacity会调整图片的透明度，这个和filter中的opacity效果是一样哒，但是并不是一个属性呢，因为他们是可以叠加使用的

.opacity-20{    opacity: 0.2;}.filter-opacity-20{    filter:opacity(0.2)}.opacity-both{    opacity: 0.2;    filter:opacity(0.2)}

他们接受的参数也是有一些差别的，opacity只能接受小数，filter:opactiy()既可以接受小数也可以接受百分比，值越小越透明。

hue-rotate 色相旋转

hue-rotate通过改变图片的色相来改变图片

.hue-rotate-90{    -webkit-filter: hue-rotate(90deg);}.hue-rotate-270{    -webkit-filter: hue-rotate(270deg);}

hue-rotate 参数是一个角度值，他会接受这个值并把图片中的颜色的色相做对应的旋转

invert 反转

invert会把图片上的所有颜色进行反转，如果是希望做个相机底片效果，真的是太合适了

.invert-20{    filter: invert(20%);}.invert-100{    filter: invert(100%)}

和hue-rotate相比，直接反转就用不着接受颜色变化的角度了，但是你可以设置0~100%来控制反转的程度

saturate 饱和度

色彩三要素色相，明度，饱和度。饱和度也即颜色的纯度，彩度。无彩色的色饱和度为0，也就是上面的grayscale灰度值为1的时候,饱和度越高，颜色中的灰度越低。

.saturate-50{    filter: saturate(50%);}.saturate-200{    filter: saturate(200%);}

饱和度100%时为左一原图，接受大于100%的值。

brightness 亮度

说完了色相和饱和度再来看看brightness,brightness给图片应用一种线性乘法来调整整个图片的亮度，效果和手机电脑上的的亮度调节是一样的

.brightness-4{    filter:brightness(40%)}.brightness-8{    filter:brightness(80%)}

brightness的参数可以用百分比来表示也可以用小数来表示，当参数值为0的时候整个图片都是黑色的了,超过100%的时候比原图更亮一些

contrast 对比度

contrast用来调整图像的对比度

.contrast-50 {    filter: contrast(50%)}.contrast-200{    filter:contrast(200%)}

contrast的参数接受百分比形式的数值也接受小数形式的，值为0 的时候是整个图片都是灰黑色的，为1时是原图，值越大对比度越大，默认值为1。

grayscale 灰度模式

有格调的灰度模式开启

.gray-scale-50{    filter:grayscale(50%)}.gray-scale-100{    filter:grayscale(100%)}

grayscale的参数接受百分比和小数，默认参数是100%，完全灰度，1以内的值越大越靠近完全灰度，大于等于1的值的效果是一样哒

修图利器之 Blend Modes

CSS3的混合模式决定了多个图片/图层叠加在一起的时候显示的效果。关于混合模式的算法可以在维基百科上了解。不同的模式值对应了不同的算法，最后决定了图片混合模式效果。相关的两个属性是mix-blend-mode和background-blend-mode，background-blend-mode主要是作用于同一个background属性下的背景图片或者背景色。

混合模式的值的对应效果可以完全类比PS中图层模式效果，他们的对应关系是：

1. normal 正常模式
2. multiply 正片叠底模式
3. screen 滤色模式
4. overlay 叠加模式
5. darken 变暗模式
6. lighten 变亮模式
7. color-burn 颜色加深模式
8. hard-light 强光模式
9. soft-light 柔光模式
10. difference 差值模式
11. exclusion 排除模式
12. hue 色相模式
13. saturation 饱和度模式
14. color 颜色模式
15. luminosity 亮度模式

mix-blend-mode 式

mix-blend-mode主要作用是把目标元素和其下方的背景元素混合。

图片来自于

快速开始：

这是两张原图

/*让两张图片重叠在一起*/.mix-blend-mode{    position:relative}.mix-blend-mode img{    position:absolute}

然后就可以给小黄人图片添加mix-blend-mode啦，因为小女孩图片排在小黄人下面，所以如果在不给小黄人设置mix-blend-mode的情况下只给小女孩图片添加效果的话是看不到任何效果的。

.mix-normal{    mix-blend-mode: normal;}.mix-color{    mix-blend-mode: color;}.mix-color-burn{    mix-blend-mode:color-burn;}.mix-color-dodge{    mix-blend-mode: color-dodge;}.mix-darken{    mix-blend-mode: darken;}.mix-difference{    mix-blend-mode: difference;}

.mix-exclusion{    mix-blend-mode: exclusion;}.mix-hard-light{    mix-blend-mode: hard-light;}.mix-hue{    mix-blend-mode: hue;}.mix-inherit{    mix-blend-mode: inherit;}.mix-initial{    mix-blend-mode: initial;}.mix-lighten{    mix-blend-mode: lighten;}

.mix-luminosity{    mix-blend-mode: luminosity;}.mix-overlay{    mix-blend-mode: overlay;}.mix-saturation{    mix-blend-mode: saturation;}.mix-screen{    mix-blend-mode: screen;}.mix-soft-light{    mix-blend-mode: soft-light;}.mix-unset{    mix-blend-mode: unset;}

添加了mix-blend-mode属性的图片除了可以对其下面的图片叠加，还可以对其背景色叠加，左一为原图，依次给右边4张图片添加下面css中的样式，并且给他们的父元素设置蓝色背景，然后，各种艺术形态的小黄人出现了！

.mix-background-lighten{    mix-blend-mode: lighten;}.mix-background-screen{    mix-blend-mode: screen;}.mix-background-difference{    mix-blend-mode: difference;}.mix-background-luminosity{    mix-blend-mode: luminosity;}

background-blend-mode

兼容性如下：

图片来自于

background-blend-mode顾名思义是作用于background-image，background-color的。并且是写在一个background属性后面的图片，颜色哦。

.background-blend-mode-self{    background: url(./images/g.jpg) #673AB7 no-repeat;    background-blend-mode: unset;}.background-blend-mode-color{    background: url(./images/g.jpg) #673AB7 no-repeat;    background-blend-mode: screen;}.background-blend-mode-luminosity{    background: url(./images/g.jpg) #673AB7 no-repeat;    background-blend-mode: luminosity;}.background-blend-mode-exclusion{    background: url(./images/g.jpg) #673AB7 no-repeat;    background-blend-mode: exclusion;}.background-blend-mode-overlay{    background: url(./images/g.jpg) #673AB7 no-repeat;    background-blend-mode: overlay;}.background-blend-mode-soft-light{    background: url(./images/g.jpg) #673AB7 no-repeat;    background-blend-mode: soft-light;}

篇幅有限，其他的background-blend-mode效果就不贴代码啦。

代码地址

参考文献

其实这些功能综合运用会有很神奇的效果，后续会写文章介绍哒。

原文发布时间为：2017年12月15日

原文作者：如梦令

本文来源前端外刊如需转载请联系原作者