前端 filter 属性 实现页面置灰功能 + 学习filter属性

前端 filter 属性 实现页面置灰功能 + 学习filter属性

全部网站灰色:

---

使用了 CSS3 中的 filter 属性，来进行控制的，给最外层的html加上即可：

// 适应各种浏览器做的兼容
html {
    
    
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

-webkit-filter：带有 webkit 前缀可以在 webkit 内核的浏览器中生效；
-moz-filter：带有 moz 前缀可以在 Firefox 浏览器中生效；
-ms-filter：带有 ms 前缀可以在 IE 浏览器生效；
-o-filter：带有 o 前缀可以在 Opera 浏览器生效；
最后三行都是为了兼容 IE 内核的浏览器。

除了 filter 还有什么置灰网站的方式? 可参考：https://www.cnblogs.com/coco1s/p/16943642.html

---

CSS3 filter(滤镜) 属性

文档：https://www.runoob.com/cssref/css3-pr-filter.html

1.语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

2.none：默认值，表示没有效果

3.blur：给图像设置高斯模糊,单位为px

img {
    
    
    -webkit-filter: blur(10px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}

如果未设置值，默认是0：

4.brightness：使其看起来更亮或更暗,单位为%（值是100%，图像正常；值是0%，图像会全黑；小于100%，越小越黑；大于100%，越大越亮）

img {
    
    
    -webkit-filter: brightness(150%); /* Chrome, Safari, Opera */
    filter: brightness(150%);
}

img {
    
    
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}

5.contrast：调整图像的对比度,单位为%（值是100%，图像正常；值是0%，图像会全黑；大于100%，越大越失真）

img {
    
    
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

img {
    
    
    -webkit-filter: contrast(20%); /* Chrome, Safari, Opera */
    filter: contrast(20%);
}

6.drop-shadow(x-offset y-offset blur color)：实现阴影滤镜效果

（1）x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
（2）y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
（3）blur：定义阴影的模糊半径，只能为正值。
（4）color：定义阴影的颜色。

img {
    
    
   -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

7.grayscale：将图像转换为灰度图像,单位为%（值是100%，完全转为灰度图像；值是0%，图像没变化）

img {
    
    
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

8.hue-rotate：给图像应用色相旋转,单位为deg（值是0%，图像没变化；360deg为一圈）

img {
    
    
    -webkit-filter: hue-rotate(100deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(100deg);
}

9.invert：反转输入图像,单位为%（值是100%完全反转。值为0%则图像无变化）

img {
    
    
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}

10.opacity：转换图像饱和度,单位为%（值为0%则是完全不饱和，值为100%则图像无变化，大于100%，饱和度更高）

img {
    
    
    -webkit-filter: opacity(0%); /* Chrome, Safari, Opera */
    filter: opacity(0%);
}

11.saturate：透明程度,单位为%（值为0%则是完全透明，值为100%则图像无变化）

img {
    
    
    -webkit-filter: saturate(500%); /* Chrome, Safari, Opera */
    filter: saturate(500%);
}

12.sepia：将图像转换为深褐色,单位为%（值为100%则完全是深褐色的，值为0%图像无变化）

img {
    
    
    -webkit-filter: saturate(500%); /* Chrome, Safari, Opera */
    filter: saturate(500%);
}

13.url：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

img {
    
    
    filter: url(svg-url#element-id)
}