文章最后更新时间:
我们发现许多主要网络平台的界面都变成了灰色调,以示哀悼。这包括了百度、B站、爱奇艺、CSDN、微信支付图标以及QQ头像等。在纪念和悼念重要人物或英雄的日子,将网站页面调整为黑白或灰色已成为一种表达哀思和敬意的方式。
当我们浏览网站时,偶尔会发现网站的整体风格突然变为灰色,包括各种按钮和图片。这种变化可能会引起我们的好奇:如何快速且高效地实现这样的效果呢?这些方法主要是通过添加特定的CSS代码到网页中来实现的。
方法1:
<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>
方法2:
<style>
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
</style>
![图片[2]- css实现整个网站变成灰色的效果- 如烟笔记](https://blog.iosru.com/wp-content/uploads/2023/12/23c772aa7dfbc827afc4ec2d41dc5950.png)
方法3:
<style>
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=\'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)
}
</style>
© 版权声明
本站收集的资源仅供内部学习研究软件设计思想和原理使用,学习研究后请自觉删除,请勿传播,因未及时删除所造成的任何后果责任自负。
如果用于其他用途,请购买正版支持作者,谢谢!若您认为「RuYan」发布的内容若侵犯到您的权益,请联系站长邮箱: iosruyan@163.com 进行删除处理。
本站资源大多存储在云盘,如发现链接失效,请联系我们,我们会第一时间更新。
THE END
暂无评论内容