invert()方法,是用来实现反色滤镜效果的。反色,指的是将红、绿、蓝3个通道的像素取各自的相反值。

语法:

filter: invert(百分比)

说明:

invert()方法的取值是一个百分比,取值范围为0%~100%。其中,0%表示没有转换,100%表示反转所有颜色。

举例:

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

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