十大滤镜效果，在悬浮图片、切换二维码模糊不用的图片等上使用还是很不错的。 原图  ## 一、grayscale（灰度模式 0~1） ~~~ img {-webkit-filter: grayscale(1);} ~~~ 上面样式效果：  ## 三二、sepia（褐色模式 0~1） ~~~ img {-webkit-filter: sepia(0.5);} ~~~ 上面样式效果：  ## 3、saturate（饱和度 0~1） ~~~ img {-webkit-filter: saturate(0.5);} ~~~ 上面样式效果：  ## 四、hue-rotate（色相旋转 0~360deg） ~~~ img {-webkit-filter: hue-rotate(90deg);} ~~~ 上面样式效果：  ## 五、invert（反色 0~1） ~~~ img {-webkit-filter: invert(0.4);} ~~~ 上面样式效果：  ## 六、opacity（透明度 0~1） ~~~ img {-webkit-filter: opacity(0.4);} ~~~ 上面样式效果：  ## 七、brightness（亮度） ~~~ img {-webkit-filter: brightness(0.5);} ~~~ 上面样式效果：  ## 八、contrast（对比度 0~） ~~~ img {-webkit-filter: contrast(2);} ~~~ 上面样式效果：  ## 九、blur（模糊度 0~） ~~~ img {-webkit-filter: blur(1px);} ~~~ 上面样式效果：  ## 十、drop-shadow（阴影效果） ~~~ img {-webkit-filter: drop-shadow(5px 5px 5px #ccc);} ~~~ 上面样式效果：