CSS3中的saturate()方法可以实现饱和度滤镜效果。

语法:

filter: saturate(百分比)

说明:

saturate()方法的取值是一个百分比。其中,0%~100%表示减弱饱和度,100%以上表示增强饱和度。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #after { filter:saturate(300%); } </style> </head> <body> <div id="before"> <img src="img/princess.png" alt=""> </div> <div id="after"> <img src="img/princess.png" alt=""> </div> </body> </html>

浏览器预览效果如下图所示。