使用grayscale()方法,可以实现灰度滤镜效果。灰度滤镜可以将彩色图片转换成黑白图片。

语法:

filter: grayscale(百分比)

说明:

grayscale()方法的取值是一个百分比,其中0%表示不做任何修改,100%表示完全灰度(即黑白图片)。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #after { filter:grayscale(100%); } </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>

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