彻底弄懂css filter滤镜

HSL色彩模型

色相（HUE）：在基础色轮上分布的颜色，也称为纯色，纯色是不含黑、白、灰的颜色。

饱和度（SATURATION）：是指颜色的鲜亮程度，在纯色中加入灰色，会降低色彩的饱和度。100%是纯色，没有灰色阴影。50%是50%的灰色，0%是完全灰色。下图是饱和度从100%到0%的变化。

明暗度（LIGHTNESS）：是指颜色的色彩的明暗程度，在纯色中加入黑色或白色，会改变颜色的明暗度。其中0%表示全暗（黑色），100%表示全明（白色），50%是即不明也不暗。

HSL色彩模型就是色相、饱和度和明暗度三者混合组成的颜色模型。表示为 hsla(hue, saturation, lightness)。

filter基础使用

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

filter属性的含义

brightness() 让图像更明亮或更暗淡，0% 将创建全黑图像，100% 展示原图，大于100%展示更明亮的图片效果。
contrast() 增加或减少图像的对比度，值是0%图像全灰图像，没有对比度。100% 展示原图，大于100%展示对比度更高的图片效果。
saturate() 超饱和或去饱和输入的图像，值为0% 则是完全不饱和，完全转为灰度图像，100% 展示原图，大于100% 则有更高的饱和度。
grayscale() 改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为100% 则完全转为灰度图像。
blur() 模糊图像。传入值单位为px
drop-shadow() 给图片添加阴影，与box-shadow的属性值一样。
hue-rotate() 改变图整体色调，angle设定图像会被调整的色环角度值。值为0deg展示原图，大于360deg相当于又绕一圈。
invert() 反转图像颜色,值在 0% 和 100% 之间,100% 的价值是完全反转。值为 0% 则图像无变化。
opacity()改变图像透明度，值在 0% 和 100% 之间，值为 0% 则是完全透明，值为 100% 则图像无变化。
sepia()将图像转为棕褐色，值在 0% 到 100% 之间，值为 100% 则完全是深褐色的，值为 0% 图像无变化。

filter函数使用方法

可以使用单个滤镜函数，也可是同时使用多个滤镜函数。

/* <filter-function> values 使用单个滤镜*/
filter: blur(5px);
/* Multiple filters 使用多个滤镜*/
filter: contrast(175%) brightness(3%);
/* Use no filter 不使用滤镜 */
filter: none;
复制代码

filter各属性值效果

codepen.io/denghuijie/…

filter的应用实例

不规则投影

codepen.io/denghuijie/…

box-shadow能够完美地给矩形或者border-radius生成的形状增加投影效果。但是当元素添加了伪元素或者半透明的装饰后，box-shadow会忽视透明的部分，导致投影效果不佳。

box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5**)** 可以使用drop-shadow()滤镜为半透明图片、伪元素等添加阴影效果。**请记住drop-shadow会给任何非透明部分加上阴影。

filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));

染色效果

codepen.io/denghuijie/…

把多种滤镜组合起来，达到染色效果。

使用sepia(1)降低饱和度的橙黄色效果，几乎所有的像素都收敛至35-40.
使用saturate(200%)滤镜来提高像素的饱和度。
使用hut-rotate(295)滤镜改变主色调，比如想要主色调是hsl(335, 100%, 50%),40改变为335,色相偏移295度，即hue-rotate(295)

毛玻璃效果

codepen.io/denghuijie/… 由于我们不能直接对元素本身进行模糊处理，就对一个伪元素进行处理，然后将其定位到元素的下层，将伪元素的背景和body背景无缝重合，对伪元素进行模糊处理。

首先添加一个伪元素，将其绝对定位，并把所有偏移量置为0，这样就可以将它完整的覆盖到.content上了。

.content::before{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}
复制代码

将伪元素的背景设为和body元素背景完全重叠。

body,
.content::before{
        background: url(bg.jpg);
        background-attachment: fixed;
}
复制代码

伪元素添加模糊属性,由于模糊效果在边缘处会逐渐消退，需要让伪元素相对宿主元素的尺寸向外扩大至少20px;同时宿主元素把多余的模糊区域裁剪掉。

.content{
        overflow: hidden;
}
.content::before{
        filter: blur(30px);
        margin: -50px;
}
复制代码

通过模糊来弱化背景

codepen.io/denghuijie/…