为表述全国性各族老百姓抵抗击新冠肺炎疫情抗争放弃英烈和去世通报的深切悼念，国务院今日公布公示，决策今年4月4日（明日）举办全国性性悼念主题活动。在此期内，全国性和驻外使馆下半旗致哀，全国性终止公共性游戏娱乐主题活动，4月4日10点刚开始，全国性老百姓默哀3分钟，轿车、火车、舰船鸣笛，防空报警鸣响。
想起过去默哀日浏览网站时发现整站会变为全灰，即想起假如马上刚开始开发设计、设计方案图改动等工作中也会耗费很多的時间与活力，那会不容易有css能够立即解决全部的元素将她们变灰，随即想起了css3的filter（滤镜），并也确认了这1念头的可行性。
filter: grayscale 应用能够调剂元素的灰度值值
.gray-filter {
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=\'http://www.w3.org/2000/svg\'><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);
}
实战演练
以B站为例：
在一切正常的状况下B站这个导航栏栏滑到下面以后是fixed在网页页面的顶部的
但倘若你把这段css加到了body上会产生下面这类状况：
你能够发现它已不固定不动在网页页面的顶部了，而是超过去了显示屏外面，显示屏左下角的小电视机人也跑到了网页页面上半一部分去，为何会产生这样的状况呢？
我去Google查阅了有关材料，发现:
针对特定了 filter 款式且值不为 none 时，被运用该款式的元素其子元素中假如有 position 为 absolute 或 fixed 的元素，会为这些元素建立1个新的器皿，使得这些肯定或固定不动精准定位的元素其精准定位的标准相对这个新建立的器皿。
大家能够想到出fixed是相对html根器皿来精准定位的，假如在body上设定了filter则会建立1个新的精准定位标准，而网页页面翻转时将body翻转出了显示屏外，则body内全部子孙后代元素的fixed将造成不符预期的实际效果。
怎样处理呢？
处理计划方案1
危害全站的方式大家能够将该款式运用到根元素html上，即便建立了新的精准定位标准元素，也不容易对子孙后代元素造成不符预期的危害。
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=\'http://www.w3.org/2000/svg\'><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);
}
实际效果：
处理计划方案2
非全站变灰大家能够将必须应用filter的元素独立再加
<html>
<body>
<div class="gray-filter"></div>
</body>
</html>
<style>
.fixed {
position: fixed;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
background-color: #f00;
}
.gray-filter {
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=\'http://www.w3.org/2000/svg\'><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);
}
</style>
到此这篇有关1段css让全站变灰的编码总结的文章内容就详细介绍到这了,更多有关css全站变灰內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！
Copyright © 2002-2020 html网页制作_php网页制作_网页设计稿_网页编辑工具_学生网页设计模板 版权所有 （网站地图） 粤ICP备10235580号