filtergrayscale的简单介绍
一行代码实现界面全灰(android,web,flutter)
Paint paint = new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);
mPaint.setColorFilter(new ColorMatrixColorFilter(cm));
getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE, paint);
可以放到基类里边去统一调用！另外你想只对某个view进行操作的话把getWindow().getDecorView()换成对应的view即可
style type="text/css"
html {
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(1)
}
/style
filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同
runApp(
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
child: FlutterApp())));
使用ColorFiltered，在最外层套上即可
如何用css将页面变成灰色
下面是最大限度兼容所有浏览器的代码：
html{
????-webkit-filter:grayscale(100%);
????-moz-filter:grayscale(100%);
????-ms-filter:grayscale(100%);
????-o-filter:grayscale(100%);
????filter:grayscale(100%);
????filter:url("data:image/svg+xml;utf8,svg?xmlns=\'\'filter?id=\'grayscale\'feColorMatrix?type=\'matrix\'?values=\'0.3333?0.3333?0.3333?0?0?0.3333?0.3333?0.3333?0?0?0.3333?0.3333?0.3333?0?0?0?0?0?1?0\'//filter/svg#grayscale");
????filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}
css的filter:gray没效果
主要发挥作用的样式
过滤器以下两行：灰色;
-webkit的过滤器：灰度（100％）;
过滤器的意思过滤器，滤芯：灰色的意思是说一个灰色的滤光页，里面的所有内容的HTML变成黑色和白色。然而，这种过滤器是无效的Chrome和Safari浏览器，所以下面会有一排
-webkit的过滤器：灰度（100％）;
这种风格是专为使用webkit核心的浏览器，意义和过滤：灰色差不多，只是以不同的方式写什么。
。幻灯片口罩{
过滤：无;
不透明度：无;
}
几行和页黑白无所谓，它的作用应该是关注的焦点网站过滤器除去。
sub_filter部分灰色
其实解决方案很简单，只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。如下图，有一个灰色样式：[filter: grayscale(100%);]，也许就是这一个样式控制着整个网页显示效果。
现在试着关掉这个样式，会发现整个csdn页面恢复了往常的红色主题，包括网站logo、图片和按钮都恢复了。
总结上面的实验效果，果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码：
html {? webkit-filter: grayscale(100%);? filter: grayscale(100%);}
当然这种修改CSS的方式还有很多，我们可以在Mozilla发布的样式效果测试平台上看看 filter 这种不同层叠样式效果。
平台地址：
通过这几个用力可见通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法：
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* filter-function values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
设置一种函数，方法如下：
filter: filter-function [filter-function]* | none
如果对层叠样式感兴趣的朋友可以阅览下官网的说明文档：
除了这些开发样式调整的方法以外，还可以走系统架构角度解决网页的显示问题，通常很多大型网站都用上了反向代理nginx服务器，所有网站访问，都要通过nginx代理去访问到网页内容。
既然这样，统一在nginx服务器上做一些配置也是可行的，之前某大神的博客说“在Nginx负载均衡服务器上，利用sub_filter指令在输出的HTML中增加一行如下代码：
style type="text/css"html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }/style
css中怎么把照片调为灰度
Css中将图片调为灰色，是利用滤镜的效果进行渲染的
不同的浏览器需要不同的前缀进行支持。
具体将图片调整为灰色的代码如下
img?{?
??????filter:?grayscale(100%);??//默认
??????-webkit-filter:?grayscale(100%);??//谷歌浏览器
??????-moz-filter:?grayscale(100%);??//火狐浏览器
??????-ms-filter:?grayscale(100%);??//IE核心浏览器
??????-o-filter:?grayscale(100%);???//Oprea浏览器
??????-webkit-transition:all?1s?ease-in-out;??//这是设置过渡时间效果，有一个缓冲时间
??????-o-transition:all?1s?ease-in-out;
??????-moz-transition:all?1s?ease-in-out;
??????-ms-transition:all?1s?ease-in-out;
}
若需要调整为彩色
img：hover{?
??????filter:?grayscale(0%);??//默认
??????-webkit-filter:?grayscale(0%);??//谷歌浏览器
??????-moz-filter:?grayscale(0%);??//火狐浏览器
??????-ms-filter:?grayscale(0%);??//IE核心浏览器
??????-o-filter:?grayscale(0%);???//Oprea浏览器
??????-webkit-transition:all?1s?ease-in;??//这是设置过渡时间效果，有一个缓冲时间
??????-o-transition:all?1s?ease-in;
??????-moz-transition:all?1s?ease-in;
??????-ms-transition:all?1s?ease-in;
}
后台怎么删除filter:grayscale(100%)
后台怎么删除filter:grayscale(100%)？
有时候在做网站开发时需要对网页进行灰度处理，我闲的慌，就在网上收集了集中可以对网站进行灰度处理的方法，供大家闲时消遣，直接上代码
1.当然是CSS样式了，兼容性比较好，考虑到了各种浏览器内核机制，和一些灰度的调试
html
{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,svg xmlns=\'\'filter id=\'grayscale\'feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'//filter/svg#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}