css提供了很多种的滤镜：
* drop-shadow
* sepia
* blur
* hue-rotate
* invert
* brightness
* contrast
* opacity
* grayscale
* 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的时候,饱和度越高，颜色中的灰度越低
饱和度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的值的效果是一样哒
以上转载自： https://zhuanlan.zhihu.com/p/28422426 ，尊重原创
示例
黑白效果
(function(){
document.querySelector('body').style['filter']='grayscale(100%)';
})()
模糊效果
(function(){
document.querySelector('body').style['-webkit-filter']='blur(3px)';
})()
反色效果
(function(){
document.querySelector('body').style['filter']='invert(100%)';
})()
评论 (0)