摘要:一般情况下一个网站出现整体效果黑白或者灰白效果的时候,多是由于发什么什么重大的事情或者悼念一些人或事物。在今年的时候由于特殊原因大眼仔的 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 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
猜你喜欢
- 2023-06-03开源轻量级文本编辑器 BowPad 2.8.8 + x64 中文免费版
- 2024-03-21Windows 10 系统优化管理工具 Windows 10 Manager 3.9.3 中文免费版
- 2023-01-02鼠标宏录制工具 Jitbit Macro Recorder 5.9.0 中文汉化修正版
- 2022-10-06专业像素画绘制软件 GraphicsGale 2.08.21 汉化中文版
- 2022-07-23盘点 2022 年之前世界上最畅销的游戏机主机
相关推荐
- 2023-02-24大眼仔推荐:110 个不可不知的 ChatGPT 文案示例终极使用指南
- 2021-07-19什么是 6G,它与 5G 相比如何?
- 2024-03-11.NET 资源文件编辑器 Zeta Resource Editor 2.3.78.0 中文绿色汉化版
- 2024-03-28微软出品免费壁纸工具 Bing Wallpaper 2.0.0.6 中文多语免费版
- 2023-12-05苹果 macOS Big Sur 11.7.10 (20G1427) 官方镜像下载
全部评论: (0条)
^_^ 暂无评论!
发表评论
最新标签
Autodesk
GitHub
Inno Setup 技巧
Inno Setup 教程
JetBrains
Microsoft
Office
OpenAI
PDF 编辑器
PDF 阅读器
Win10 技巧
Windows 10
Windows 10 技巧
Windows 11
Windows 11 小技巧
Wise Soft
代码编辑器
免费商用字体
免费字体
免费软件
办公软件
固态硬盘检测工具
图像处理工具
图像浏览器
安卓软件
安装包制作工具
屏幕录像
屏幕录像工具
屏幕录像软件
开源字体
开源软件
思维导图
截图工具
数据恢复工具
文本编辑器
格式转换工具
桌面录像
系统优化工具
系统增强
系统增强工具
视频播放器
视频转换器
视频转换工具
音乐播放器
音频转换工具