网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程

在遇到特殊情况的时候，我们作为站长需要紧急将网站变灰的需求，在此小编给大家总结了几种方法，通过简单修改一下站点样式即可实现。一段代码让网站整体变灰。这里主要介绍的利用

filter: grayscale属性来实现。供大家学习交流。

第一种：简单CSS网站变灰

一般主题都有自定义CSS样式设置页面，只需要将下面的代码放进去保存即可。若没有设置的地方，可以放在网站主题根目录的stly.css文件中：

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

第二种：Wordpress通过functions让网站整体变灰

以上方法不可用的话，在主题目录的functions.php文件里面添加以下内容

 //网站整体变灰function hui_head_css() {$styles = "";$styles .= "html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}";if ($styles) {echo "<style>" . $styles . "</style>";}}add_action("wp_head", "hui_head_css");

为了兼容多种浏览器标准，可以增加一下样式：

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;}html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}

三、代码解析一下：

grayscale(amount) : 对图片进行灰度转换。

amount转换值的大小，可以是数字或百分比。
当值为 100% 时，灰度最大。
0% 时与原图没有区别。
0% 到 100% 之间的值会使灰度线性变化。
amount 为空时使用值为1。

filter: grayscale(50%);
filter: grayscale(0.9);

为了方便，可以在后台这样加入

<style type="text/css">
html {filter: grayscale(1)
}
</style>

还有一些其他的效果

/*blur 模糊*/
filter:blur(2px);/*brightness 亮度*/
filter:brightness(25%);/*contrast 对比度*/
filter: contrast(50%);/*drop-shadow 阴影*/
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));/*opacity 透明度*/
filter: opacity(50%);/*grayscale 灰度*/
filter: grayscale(80%);/*sepia 褐色*/
filter: sepia(100%);/*invert 反色*/
filter: invert(100%);/*hue-rotate 色相旋转*/
filter:hue-rotate(180deg);/*saturate 饱和度*/
filter: saturate(1000%);

网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程相关推荐

网站添加用户名和密码_实测 | 10分钟搭建一个 WordPress 网站，便宜、快捷、稳定...
经过我实测,大概10分钟左右建好了一个 WordPress 站点,站点为:boyzcl.com,感兴趣的可以去看看,目前还没有配置WP主题,后续会同步一下文章,以及某些不太方便说的内容. 不过我的10 ...
如何把自己的网站部署在网上_Terminal：如何在IPFS上部署Wordpress网站
2020年3月19日,胡安兴奋的向大家推送: 利用terminal.co在IPFS上部署了我的个人网站,耗时小于10分钟,这太棒了! 为@terminaldotco喝彩! Terminal简介从本地 ...
php开发添加表情功能,WordPress网站评论区如何实现添加表情包功能？
做网站过程中,可以给自己的网站添加评论框,供用户评论.默认情况下,Wordpress网站评论框是没有添加表情功能的,那么WordPress网站评论区如何实现添加表情包功能?今天我们介绍一下如何给自己的 ...
wordpress 首页调用指定分类文章_怎样给wordpress网站分类目录页面，添加文章列表和分页效果？...
在前面的章节中,我们完成了wordpress网站首页模板数据的调用,也创建好了wordpress网站的公共模板.今天,我们再来给wordpress网站的分类目录页模板archive.php文件添加左侧 ...
SEO优化：Sitemap插件生成WordPress网站地图
▣ 前言什么是sitemap网站地图?wordpress如何自动生成sitemap地图文件呢? 对于网站建设来说,网站地图是非常关键的,因为这对搜索引擎收录是很有利的.网上有很多方法介绍si ...
WordPress网站备份与还原
WordPress网站备份与还原这篇文章我们介绍WordPress网站备份和还原.我们的网站建在云端,万一出现意料不到的问题(比如有人恶意攻击或者植入病毒),或者自己操作不当导致网站崩溃,这时候自己 ...
20. WordPress网站备份与还原
WordPress网站备份与还原这篇文章我们介绍WordPress网站备份和还原.我们的网站建在云端,万一出现意料不到的问题(比如有人恶意攻击或者植入病毒),或者自己操作不当导致网站崩溃,这时候自己 ...
基于nginx配置的WordPress网站防御17ce等测速网站攻击指南
本文原文:基于宝塔面板nginx配置的WordPress网站防御攻击指南-奇它博客免插件实现WordPress网站屏蔽后台搜索词广告 WordPress网站批量更换文章固定链接(百度收录自动301跳 ...
如何将亚马逊广告添加到您的 WordPress 网站（3 种方法）
您想将亚马逊广告添加到您的 WordPress 网站吗? 亚马逊广告可以成为在线赚钱的好方法.此外,与其他广告网络相比,他们的审批流程更快.更简单. 在本文中,我们将逐步向您展示如何将亚马逊广告添加到 ...
wordpress 后台卡_如何在您的WordPress网站上轻松接受信用卡付款
wordpress 后台卡 Do you want to learn how to accept credit card payments on your WordPress site? By def ...

网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程

第一种：简单CSS网站变灰

第二种：Wordpress通过functions让网站整体变灰

网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程相关推荐

最新文章

热门文章