CSS中的filter属性可以对元素进行一系列的滤镜效果,其中包括颜色的滤镜效果。以下是一些常用的颜色滤镜效果:
/* 灰度 */ filter: grayscale(100%); /* 色相旋转 */ filter: hue-rotate(90deg); /* 反相 */ filter: invert(100%); /* 亮度调整 */ filter: brightness(200%); /* 对比度调整 */ filter: contrast(200%); /* 饱和度调整 */ filter: saturate(200%); /* 透明度调整 */ filter: opacity(0.5);
灰度可以将元素完全变成灰色,比如:
div { filter: grayscale(100%); }
色相旋转可以将元素的颜色全部旋转一定的角度,比如:
div { filter: hue-rotate(90deg); }
反相可以将元素的颜色完全颠倒,比如:
div { filter: invert(100%); }
亮度调整可以增加或者减少元素的亮度值,比如:
div { filter: brightness(200%); }
对比度调整可以增加或者减少元素的对比度值,比如:
div { filter: contrast(200%); }
饱和度调整可以增加或者减少元素的饱和度值,比如:
div { filter: saturate(200%); }
透明度调整可以增加或者减少元素的透明度值,比如:
div { filter: opacity(0.5); }
除了以上几种颜色的滤镜效果外,还有一些其他的效果,大家可以自己去探索。