filter: function(param);
CSS濾鏡支持的方法(function)有
grayscale 灰度
sepia 褐色
saturate 飽和度
hue-rotate 色相旋轉
invert 反色
opacity 透明度
brightness 亮度
contrast 對比度
blur 模糊
drop-shadow 陰影
為了實現兼容性,當然少不了前綴-webkit-
-webkit-filter : function (param);
我們用一個清純美女作為原圖:
一、blur 模糊
-webkit-filter : blur(2px);
filter : blur(2px)
二、grayscale 灰度
-webkit-filter : grayscale(100%);
filter : grayscale(100%);
三、sepia 褐色
-webkit-filter : sepia(100%);
filter : sepia(100%);
四、saturate 飽和度
-webkit-filter : saturate(5);
filter : saturate(5)
五、hue-rotate 色相旋轉
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg)
六、invert 反色
-webkit-filter : invert(1);
filter : invert(1);
七、opacity 透明度
-webkit-filter :opacity(.5)
filter : opacity(.5)
八、brightness 亮度
-webkit-filter : brightness(3)
filter : brightness(3)
九、contrast 對比度
-webkit-filter : contrast(.5)
filter : contrast(.5)
十、drop-shadow 陰影
-webkit-filter : drop-shadow(10px 10px 5px #000);
filter : drop-shadow(10px 10px 5px #000);
更多建議: