由置灰引出的css滤镜filter是什么东西？

文章目录

前言
一、什么是置灰呀？
二、针对iframe的内容
三、filter除置灰（grayscale）外的其他属性

前言

为什么突然想起做这个笔记呢？主要追溯到最近晚上客户在我看鬼片的时候让我帮忙置灰网站这个事情开始，同时也在这里志哀下老同志把。

一、什么是置灰呀？

直接给我的现代浏览器挂上灰色,怎么挂呢？上灰度把，毕竟图片识别基础也是灰度来的，应该有方法。
filter: grayscale(paramter);
paramter ： 支持0 ~ 1，也支持0 ~ 100% ，主要是灰度的层度，看前面的前缀 gray 就知道了~

（1）选择需要的元素全部置灰吧！

管他三七二十一，需要在哪个节点内容上全部置灰就加上去

<html>
<body>
	<div class="area-a">div>
	<div class="area-b">div>
body>
html>
<style>
.area-a,.area-b{
	height: 50px;
}
.area-a{
	background: red;
}
.area-a{
	background: yellow;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

样式操作


/*全局变灰*/
body{
	filter:grayscale(100%);
 	-webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
}
/*a部分变灰*/
.area-a{
	filter:grayscale(100%);
 	-webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（2）如何置灰中抽取子内容部分不置灰呢？

话说不可能整个区域都需要加的吧，当然你可以说疯狂逗号加选择器什么的就可以，但是这里简短的话，用 not 更方便

<html>
<body>
	<div class="area-a">
   	  <div class="area-a-one">div>
   	  <div class="area-a-two">div>
   div>
	<div class="area-b">div>
body>
html>
<style>
.area-a,.area-b{
	height: 50px;
}
.area-a{
	background: red;
}
.area-a{
	background: yellow;
}
.area-a-one,.area-b-two{
	height: 25px;
	background:green;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

样式操作

/*  not 用法 */
/*body 内除了area-a-one和本体area-a之外其他变灰,*/
body :not(.area-a,.area-a-one){
	filter:grayscale(100%);
 	-webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
}

/* 常规操作 */
body {
	filter:grayscale(100%);
 	-webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
}

.area-a-one{
  filter:none;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（3）针对ie10、11怎么搞？

由于IE10、11上有时候并不能正确的执行filter的grayscale样式，一般来说需要我们手动去改色之类的。
这里可以存在两种方式：（值得一提的是，其实这两种方法都有点慢，但是能基本达到目标）
① 自己根据网站元素的类型，通过js去逐一变色。
②调用通用的grayscale.js 来对网站置灰。
首先说明，网上那些什么改样式的，一般都是无敌复制黏贴扯淡。

二、针对iframe的内容

实际上也存在说一个网站内引入嵌套其他网站的情况存在，这时候如果直接全局顶部dom元素 采用filter置灰，则会使得iframe被隐藏掉。（当然这里指的是现代浏览器）
建议：
单独为iframe配置置灰，若全局，则需要按照一的模式排除一下iframe的内容。

三、filter除置灰（grayscale）外的其他属性

下面属性仅供现代浏览器参考，可能存在浏览器不兼容问题，需要参考mdn或w3c比较。。
总体来讲，就是可以做一个h5的图像处理器使用，加上屏幕画板，即可做简单的图片编辑功能。

滤镜	描述
none	默认值，表示没有效果
blur(px)	为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊
brightness(%)	调整图像的亮度，默认值为 100％，代表原始图像； 0％表示没有亮度，图像将完全变黑；当值超过 100％时图像将变得更亮
contrast(%)	调整图像的对比度，默认值为 100％，代表原始图像； 0％将使图像完全变黑；当值超过 100％时图像将获得更高的`对比度`
drop-shadow(1，2，3，4，5)	为图像添加阴影效果，通常为四个参数,仅有前两个必填。第一个（必填值），`指定水平方向阴影的像素值`，若值为负，则阴影会出现在图像的左侧；第二个（必填值），`垂直方向阴影的像素值`，若值为负，则阴影会出现在图像的上方；第三个（可选值），`为阴影添加模糊效果`，默认值为 0，单位为像素，值越大模糊就越多，不能为负；第四个（可选）默认值为 0，`阴影的整体大小`,。若值为正，则阴影将会增大；若值为负，则阴影会缩小；第五个（可选），`为阴影添加颜色`，通常为黑色。
`grayscale`(%)	`将图像转换为灰度图像`，默认值为 0%，表示原始图像；100％表示将图像完全变成灰度图像（即黑白图像），不允许为负值
hue-rotate(deg)	`给图像应用色相旋转(应该为基础色变换）`，该值用来定义色环的度数，默认值为 0deg，代表原始图像，最大值为 360deg
invert(%)	`反转图像`，默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值
opacity(%)	`设置图像的不透明度`，默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值
saturate(%)	`设置图像的饱和度`，默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值
sepia(%)	`将图像转换为棕褐色`，默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值
etc	还有其他，但是不常用

相关阅读:
Blender点操作
 axios详解以及完整封装方法
 C++ 智能指针
 递归：为运算表达式设计优先级
 PHP 数据类型
 上海交航带动内河运输发展
 java毕业设计企业员工管理系统源码+lw文档+mybatis+系统+mysql数据库+调试
 本地如何使用HTTPS进行调试
 毕业设计之基于springboot+uniapp的租房小程序
 MyBatis实现延时加载的方式
原文地址：https://blog.csdn.net/CoffeeAndIce/article/details/128140772