使用 CSS3 的 filter 属性，我们可以给图片设置许多有趣的滤镜效果，filter 属性的可选值如下：
blur(length)：模糊度，参数 length 表示屏幕上多少像素融在一起brightness(percentage)：亮度，默认为 100%，若为 0% 则图片全黑contrast(percentage)：对比度，默认为 100%，若为 0% 则图片全黑saturate(percentage)：饱和度，默认为 100%，若为 0% 则完全不饱和opacity(percentage)：透明度，默认为 100%，若为 0% 则完全透明invert(percentage)：色彩反转，默认为 0%，若为 100% 则完全反转hue-rotate(angle)：色相旋转，参数 angle 表示色环角度grayscale(percentage)：灰度，默认为 0%，若为 100% 则变成黑白图片sepia(percentage)：褐度，默认为 0%，若为 100% 则变成褐色图片drop-drop-shadow(offset-x offset-y blur-radius color)：阴影，类似box-shadow
设置不同的 filter 属性表现出来的效果也不一样，下面我们简单的来看看，设置各个不同的属性表现出来的效果吧
首先准备一张用于测试的图片，这里我们选择 https://pixabay.com 网站提供的无版权图
<!DOCTYPE html> <head> <style> .img-div { width: 960px; height: 560px; background-image: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg'); } </style> </head> <body> <div class="img-div"></div> </body>
（1）模糊度
.filter-blur { filter: blur(5px); -webkit-filter: blur(5px); }
（2）亮度
.filter-brightness { filter: brightness(120%); -webkit-filter: brightness(120%); }
（3）对比度
.filter-contrast { filter: contrast(150%); -webkit-filter: contrast(150%); }
（4）饱和度
.filter-saturate { filter: saturate(180%); -webkit-filter: saturate(180%); }
（5）透明度
.filter-opacity { filter: opacity(20%); -webkit-filter: opacity(20%); }
（6）色彩反转
.filter-invert { filter: invert(100%); -webkit-filter: invert(100%); }
（7）色相旋转
.filter-hue-rotate { filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); }
（8）灰度
.filter-grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
（9）褐度
.filter-sepia { filter: sepia(100%); -webkit-filter: sepia(100%); }
（10）阴影
.filter-drop-shadow { filter: drop-shadow(10px 10px 20px #000000); -webkit-filter: drop-shadow(10px 10px 20px #000000); }
