css3 滤镜颜色叠加

CSS3滤镜颜色叠加是CSS3新特性之一，它可以让我们改变图片、文字、背景的颜色、亮度、对比度、模糊度、饱和度等，可以达到非常棒的效果。接下来让我们看一下具体应该如何使用。

img {
    filter: brightness(0.5) hue-rotate(180deg);
}

以上代码将图片变成了半亮度，颜色用hue-rotate(180deg)进行了旋转颜色空间，可以看到变成了完全相反的效果像反片一样。

p {
    filter: grayscale(100%);
}

以上代码将段落变成了黑白，用gray color矩阵处理图片后就只有黑、白、灰三个颜色，具体效果可以尝试一下。

div {
    background-image: url('img.jpg');
    filter: invert(100%);
}
    

以上代码将背景颜色反转，由于背景是照片所以颜色变得很奇怪，但是你可以尝试一下。

CSS3滤镜除了以上三个示例，还可以通过brightness、contrast、grayscale、sepia、blur、hue-rotate、saturate、opacity等函数调整图片效果。大家可以试着用这些函数把页面变得精彩！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！