淘先锋技术网

首页 1 2 3 4 5 6 7

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);
}

除了以上几种颜色的滤镜效果外,还有一些其他的效果,大家可以自己去探索。