综合案例 --- 一键网页黑白

1. 原理

1. 滤镜概念

filter 表示的是滤镜, 会将区域的每一个像素点, 经过一个固定的算法来进行转换, 把一种颜色转换成另一种颜色来呈现

2. 滤镜分类

1. grayscale --- 灰阶滤镜, 范围为 0 - 1
2. hue-rotate(45deg) --- 阴间滤镜, 0 - 360 deg

2. 代码实现

1. 整个页面

html {
    filter: grayscale(1);
}

2. 局部页面

.acc {
    filter: grayscale(1);
}