怎么将网站整体色调变黑白灰色?四种代码快速搞定
怎么将网站整体色调变黑白灰色?一般很庄重的事情或者影响力很大的伟人逝世、纪念日的时候,站长会把网站全部网页设置为灰色或者黑白色,以表示对逝者的悼念,本篇整理了四种可以实现网页变成灰色的代码,一起看看吧。
怎么将网站整体色调变黑白灰色?
第一种:修改CSS文件
我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰。
CSS代码:
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
第二种:在网页的标签内加入以下代码
如果你不想改动CSS文件,你可以通过在网页头部中的标签内部加入内联CSS代码的形式实现网站网页变灰。
代码:
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
or
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,#grayscale”); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);
}
有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议。
请将网页最头部的替换为以上代码。
第三种:修改标签加入内联样式
如里上面的两种方式都不喜欢,可以通过修改标签,以加入内联样式的方法,达到网页变灰的效果
代码:
《html style=“filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);”》
第四种:CSS代码
代码:
body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */}
PS:以上几种方法,都是通过CSS的滤镜来控制页面的显示而已,唯一不同的就CSS代码调用的方式。
附:实现后的效果如下图所示:
系统下载排行榜71011xp
番茄花园 Win7 64位 快速稳定版
2【纯净之家】Windows7 64位 最新纯净版
3【纯净之家】Windows7 SP1 64位 全补丁旗舰版
4JUJUMAO Win7 64位 最新纯净版
5【纯净之家】Windows7 32位 最新纯净版
6【纯净之家】Win7 64位 Office2007 办公旗舰版
7【雨林木风】Windows7 64位 装机旗舰版
8【电脑公司】Windows7 64位 免费旗舰版
9【国庆献礼】JUJUMAO Win7 SP1 64位旗舰克隆纯净版
10【深度技术】Windows7 64位 官方旗舰版
【纯净之家】Windows10 22H2 64位 专业工作站版
2【纯净之家】Windows10 22H2 64位 游戏优化版
3【纯净之家】Windows10 企业版 LTSC 2021
4【纯净之家】Windows10企业版LTSC 2021 纯净版
5【深度技术】Windows10 64位 专业精简版
6联想Lenovo Windows10 22H2 64位专业版
7【纯净之家】Windows10 22H2 64位 专业精简版
8JUJUMAO Win8.1 Up3 X64 极速精简版v2019.11
9【雨林木风】Windows10 64位 专业精简版
10【纯净之家】Win10 64位 Office2007 专业办公版
【纯净之家】Windows11 23H2 64位 游戏优化版
2【纯净之家】Windows11 23H2 64位 专业工作站版
3【纯净之家】Windows11 23H2 64位 纯净专业版
4风林火山Windows11下载中文版
5【纯净之家】Windows11 23H2 64位 最新企业版
6【纯净之家】Windows11 23H2 64位 中文家庭版
7JUJUMAO Win11 24H2 64位 专业版镜像
8【纯净之家】Windows11 23H2 64位专业精简版
9【纯净之家】Windows11 23H2 64位 纯净家庭版
10【纯净之家】Windows11 23H2 64位 官方正式版
深度技术 GHOST XP SP3 电脑专用版 V2017.03
2深度技术 GGHOST XP SP3 电脑专用版 V2017.02
3Win7系统下载 PCOS技术Ghost WinXP SP3 2017 夏季装机版
4番茄花园 GHOST XP SP3 极速体验版 V2017.03
5萝卜家园 GHOST XP SP3 万能装机版 V2017.03
6雨林木风 GHOST XP SP3 官方旗舰版 V2017.03
7电脑公司 GHOST XP SP3 经典旗舰版 V2017.03
8雨林木风GHOST XP SP3完美纯净版【V201710】已激活
9萝卜家园 GHOST XP SP3 完美装机版 V2016.10
10雨林木风 GHOST XP SP3 精英装机版 V2017.04
热门教程
装机必备 更多+
重装工具