CSS中的filter(滤镜)

滤镜通常是使用百分比（如：88%），也可以使用小数点（如：0.88）；

某些属性跟原有的CSS中的属性十分相似，但有些浏览器为了提升性能，会通过filter提供硬件加速。

以下都是filter的属性：

• 灰度(grayscale)

将图像转换为灰度图像（置灰）。0%图像五百年话，100%图像完全转为灰度

filter: grayscale(100%);

<div class="box">我就是一个盒子</div>
<button id="btn">置灰</button>

.box {
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 10px;
      text-align: center;
      line-height: 200px;
}

let btn = document.querySelector('#btn');
let box = document.querySelector('.box');
btn.addEventListener('click', function () {
    box.style.filter = 'grayscale(100%)';
})

这样点击按钮之后，box盒子就会完全置灰。

• 阴影(drop-shadow)

阴影是合成在图像下面的，可以有模糊度，也可以用特定的颜色画出遮罩图

drop-shadow(offset-x offset-y blur color)
/**
	offset-x  必须，阴影的左右位置
	offset-y  必须，阴影的上下位置
	blur  阴影的模糊值
	color  阴影的颜色
**/

• 亮度(brightness)

把图片变得更亮或者更暗。

filter: brightness(100%)
/**
0%  图像会全黑
100%  图像无变化，发现100%刚好是可以把前面置灰后的图像还原
>100%  图像回比原来的更鲜明
**/

• 透明度(opacity)

转化图像的透明程度。

filter: opacity(30%);
/**
0%  完全透明
100&  图像无变化
**/

• 褐色(sepia)

将图像转换为深褐色

filter: sepia(70%);
/**
0%  图像无变化
100%  完全是深褐色
未设置时，值默认为0
**/

• 饱和度(saturate)

转换图像的饱和度

filter: saturate
/**
0%  完全不饱和
100%  图像无变化
>100%  饱和度变高之后，色彩就会变重
**/

• 对比度(contrast)

调整图像的对比度

filter: contract(50%)
/**
0%  图像变全黑
100%  图像不变
>100%  会运用更低的对比
**/

• 模糊(blur)

给图像设置高斯模糊（近视眼）

filter: blur(8px);
/**
设定高斯模糊的值，屏幕上多少像素融合在一起，值越大越模糊
**/

• 反色(invert)

反向输出图像

filter: invert(30%);
/**
0%  图像无变化
100%  完全反转
**/

• 色相旋转(hue-rotate)

给图像应用色相旋转

filter: hue-rotate(80deg);
/**
设定图像被调整的色环角度值
0deg  图像无变化
角度没有最大值，但超过360deg就是绕了一圈
**/

• 复合写法（简写）

filter: brightness(150%) drop-shadow(0px 0px 10px #999999);

以此类推，把图像变好看/难看都行。