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

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

今天的文章CSS中的filter(滤镜)分享到此就结束了，感谢您的阅读。