一段css让全站变灰的代码总结
前端  /  管理员 发布于 6年前   327
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院今天发布公告,决定2020年4月4日(明天)举行全国性哀悼活动。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日10点开始,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。
想到以往默哀日访问网站时发现整站会变成全灰,即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力,那会不会有css可以直接处理所有的元素将他们变灰,随即想到了css3的filter(滤镜),并也证实了这一想法的可行性。
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 的元素,会为这些元素创建一个新的容器,使得这些绝对或固定定位的元素其定位的基准相对于这个新创建的容器。
我们可以联想出fixed是相对于html根容器来定位的,如果在body上设置了filter则会创建一个新的定位基准,而页面滚动时将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>
到此这篇关于一段css让全站变灰的代码总结的文章就介绍到这了,更多相关css全站变灰内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号