当前位置： 首页 > 教程资源 > Wordpress 教程 > 正文
代码实现 WordPress 网站整体变黑白/灰白效果的四种解决方案

代码实现 WordPress 网站整体变黑白/灰白效果的四种解决方案

作者：大眼仔~旭 日期：4年前 (2020-11-15) 评论：0 条

摘要：一般情况下一个网站出现整体效果黑白或者灰白效果的时候，多是由于发什么什么重大的事情或者悼念一些人或事物。在今年的时候由于特殊原因大眼仔的 Wordpress 网站也为了沉重悼念在抗疫过程中牺牲的人员进行了网站整体变灰效果。以下是大眼仔旭收集整理并测试可用的代码，现在分享给大家，顺便学习下 CSS 样式的使用方法。 第一…

一般情况下一个网站出现整体效果黑白或者灰白效果的时候，多是由于发什么什么重大的事情或者悼念一些人或事物。在今年的时候由于特殊原因大眼仔的 WordPress 网站也为了沉重悼念在抗疫过程中牺牲的人员进行了网站整体变灰效果。以下是大眼仔旭收集整理并测试可用的代码，现在分享给大家，顺便学习下 CSS 样式的使用方法。

第一种网站变黑白方法：

在 style.css 文件顶端添加下行代码即可，有些 WordPress 网站主题有自定义 CSS 样式功能，可以直接把代码粘贴进行保存即可。

1
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }

第二种网站变灰度方法：

将以下代码放入 </head> 前即可让对应网页变黑灰色！

1
2
3
4
5
<style type="text/css">

html {

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);}

</style>

第三种网站变灰色方法：

如里上面的两种方式都不喜欢，可以通过修改 <html> 标签，以加入内联样式的方法，达到网页变灰的效果。

1
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">

第四种网站整体变灰方法：

1
2
3
4
5
6
7
8
9
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- */

}

以上就是四种通过 CSS 滤镜让网站整体变灰的方法，唯一不同的是写法和实现方法不一样，这也就是所说的“举一反三”的效果。

标签：
声明：大眼仔旭 | 本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
文章名称：《代码实现 WordPress 网站整体变黑白/灰白效果的四种解决方案》
文章固定链接：https://www.dayanzai.me/wordpress-gray.html
本站资源仅供个人学习交流，请于下载后 24 小时内删除，不允许用于商业用途，否则法律问题自行承担。
转载声明
全部评论： (0条)
^_^ 暂无评论！

发表评论

表情

MORE>>微软应用

MORE>>安卓应用

MORE>>教程资源

MORE>>其它资源

最新标签

Adobe Autodesk ChatGPT FTP 软件 GitHub Inno Setup 技巧 Inno Setup 教程 JetBrains Microsoft Office OpenAI PDF 工具 PDF 编辑器 PDF 转换器 PDF 阅读器 Win10 技巧 Windows 10 Windows 10 技巧 Windows 11 Windows 11 小技巧 Windows 11 技巧 Wise Soft 代码编辑器 免费商用字体 免费字体 免费字体下载 免费软件 办公软件 卸载工具 固态硬盘检测工具 图像处理工具 图像查看器 图像浏览器 安卓视频编辑器 安卓软件 安装包制作工具 屏幕录像 屏幕录像工具 屏幕录像软件 开源字体 开源软件 思维导图 截图工具 数据恢复 数据恢复工具 文本编辑器 格式转换工具 桌面录像 汉化工具 系统优化工具 系统增强 系统增强工具 编程开发 视频播放器 视频编辑器 视频转换器 视频转换工具 解压缩工具 音乐播放器 音频转换工具
返回顶部