![代码实现 WordPress 网站整体变黑白/灰白效果的四种解决方案](http://www.dayanzai.me/wp-content/uploads/2017/06/847.png)
摘要:一般情况下一个网站出现整体效果黑白或者灰白效果的时候,多是由于发什么什么重大的事情或者悼念一些人或事物。在今年的时候由于特殊原因大眼仔的 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 网站整体变黑白/灰白效果的四种解决方案》
文章固定链接:http://www.dayanzai.me/wordpress-gray.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《代码实现 WordPress 网站整体变黑白/灰白效果的四种解决方案》
文章固定链接:http://www.dayanzai.me/wordpress-gray.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
猜你喜欢
相关推荐
- 2020-11-21Inno Setup 检测运行进程并提示结束解决方案
- 2021-05-06俄国视频播放器 Light Alloy 4.11.2 Build 3340 中文免费版
- 2017-09-09VC++ 微软常用运行库合集 V2017.09.08 + x64位
- 2020-09-08Glary 磁盘资源管理器 Glary Disk Explorer 5.27 中文免费版
- 2020-03-18专业图像编辑软件 Serif Affinity Photo 1.8.2.620 x64 中文版
全部评论: (0条)
^_^ 暂无评论!
发表评论
最新标签
Autodesk
ChatGPT
GitHub
Inno Setup 技巧
Inno Setup 教程
JetBrains
Microsoft
Office
OpenAI
PDF 编辑器
PDF 阅读器
Win10 技巧
Windows 10
Windows 10 技巧
Windows 11
Windows 11 小技巧
Wise Soft
代码编辑器
免费商用字体
免费字体
免费软件
办公软件
固态硬盘检测工具
图像处理工具
图像浏览器
安卓软件
安装包制作工具
屏幕录像
屏幕录像工具
屏幕录像软件
开源字体
开源软件
截图工具
数据恢复工具
文本编辑器
格式转换工具
桌面录像
系统优化工具
系统增强
系统增强工具
视频播放器
视频转换器
视频转换工具
音乐播放器
音频转换工具