![代码实现 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 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
猜你喜欢
- 2017-08-21河马动画师 Hippo Animator 5.1.5995 中文多语免费版 HTML 动画工作室
- 2024-06-08开源免费启动盘制作工具 Ventoy 1.0.99 中文多语免费版
- 2021-11-10多平台开源数据库服务器 MySQL 8.0.27.1 发布!
- 2019-06-16日本 CG 绘图软件 openCanvas 7.0.24 + x64 中文汉化版
- 2023-11-08埃隆·马斯克推出 Grok ,一个几乎没有护栏的“叛逆”AI
相关推荐
- 2023-05-03优秀的数码相片处理软件 FotoSketcher 3.95 x64 中文多语免费版
- 2021-05-29行为定位:在互联网上是如何为您量身定制广告的
- 2024-07-12免费开源的 Office 办公套件 LibreOffice 24.2.5 + x64 中文免费版
- 2024-07-08开源检测 Win11 硬件需求工具 WhyNotWin11 2.6.1.0 中文多语免费版
- 2022-02-19三星 Galaxy S22 Ultra 与 iPhone 13 Pro Max 你应该买哪一个?
全部评论: (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
代码编辑器
免费商用字体
免费字体
免费软件
办公软件
固态硬盘检测工具
图像处理工具
图像浏览器
安卓软件
安装包制作工具
屏幕录像
屏幕录像工具
屏幕录像软件
开源字体
开源软件
截图工具
数据恢复工具
文本编辑器
格式转换工具
桌面录像
系统优化工具
系统增强
系统增强工具
视频播放器
视频转换器
视频转换工具
音乐播放器
音频转换工具