使用 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-shadow(offset-x offset-y blur-radius color)：阴影，类似box-shadow
设置不同的 filter 属性表现出来的效果也不一样，下面我们简单的来看看，设置各个不同的属性表现出来的效果吧
首先准备一张用于测试的图片，这里我们选择 https://pixabay.com 网站提供的无版权图
<!DOCTYPE html>
<html>
<head>
<style>
.img-div {
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>
</html>
（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);
}
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】