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

布满荆棘的人生 2024-03-17 20:58 9阅读 0赞

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

### 第一种网站变黑白方法： ###

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

![3b274e830c28b09e63ac85c1ef994ee4.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>html&nbsp;{filter:&nbsp;<a href="http://www.hu6.cc/tags-632.html" title="Pro" rel="nofollow">Pro</a>gid:DXImageTransform.Microsoft.BasicImage(grayscale=1);&nbsp;-webkit-filter:&nbsp;grayscale(100%);&nbsp;}</p> </td> 
  </tr> 
 </tbody> 
</table>

### 第二种网站变灰度方法： ###

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

![cabebf78690dc09b963294d3c0e92999.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> 
   <td> <p>&lt;style&nbsp;type="text/css"&gt;<br> html { <br> filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);<br> -webkit-filter: grayscale(100%);}<br> &lt;/style&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

### 第三种网站变灰色方法： ###

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

![0d1a1654055b784a92654ca2a56a96c4.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;html&nbsp;style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

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

![072ba3c23896f534d0fef86c8bbdeb7d.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9</p> </td> 
   <td> <p>body *{ <br> -webkit-filter: grayscale(100%);&nbsp;/* webkit */<br> -moz-filter: grayscale(100%);&nbsp;/*firefox*/<br> -ms-filter: grayscale(100%);&nbsp;/*ie9*/<br> -o-filter: grayscale(100%);&nbsp;/*opera*/<br> filter: grayscale(100%);<br> filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);<br> filter:gray;&nbsp;/*ie9- */<br> }</p> </td> 
  </tr> 
 </tbody> 
</table>

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

[Link 1]: http://www.hu6.cc/tags-785.html
[Link 2]: http://www.hu6.cc/tags-159.html
[wordpress]: http://www.hu6.cc/tags-29.html
[Link 3]: http://www.hu6.cc/tags-631.html
[Link 4]: http://www.hu6.cc/tags-28.html
[Link 5]: http://www.hu6.cc/tags-776.html
[WordPress]: http://www.hu6.cc/tags-575.html
[Link 6]: http://www.hu6.cc/tags-658.html
[Link 7]: http://www.hu6.cc/tags-337.html
[Link 8]: http://www.hu6.cc/tags-729.html
[3b274e830c28b09e63ac85c1ef994ee4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3a9376fb6f62439889a630c7f0c658e8.png
[cabebf78690dc09b963294d3c0e92999.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/47cc3a953c62435382fe7013d37da964.png
[Link 9]: http://www.hu6.cc/tags-772.html
[Link 10]: http://www.hu6.cc/tags-568.html
[0d1a1654055b784a92654ca2a56a96c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/61dbab4c2dc44b9ea5a45e3e6024f592.png
[072ba3c23896f534d0fef86c8bbdeb7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3b8edd27b51f4e92a44d5776a35d1ed4.png