定制小程序开发CSS中的filter(滤镜)

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

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

以下都是filter的属性：

• 灰度(grayscale)

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

filter: grayscale(100%);

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

.box {      width: 200px;      height: 200px;      background-color: red;      margin-bottom: 10px;      text-align: center;      line-height: 200px;}
1
2
3
4
5
6
7
8

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

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

• 阴影(drop-shadow)

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

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

• 亮度(brightness)

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

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

• 透明度(opacity)

转化图像的透明程度。

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

• 褐色(sepia)

将图像转换为深褐色

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

• 饱和度(saturate)

转换图像的饱和度

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

• 对比度(contrast)

调整图像的

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

• 模糊(blur)

给图像设置（近视眼）

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

• 反色(invert)

反向输出图像

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

• 色相旋转(hue-rotate)

给图像应用色相旋转

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

• 复合写法（简写）

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

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