WordPress单页面变灰以及全站变灰代码

• 玩物志趣 • 阅读 1559

昨天，在我摘记了一片博文《痛悼！两天，两位院士逝世》，朋友 @林羽凡 给我建议是可以试着把这个页面变成灰白色。当时我立马就去操作了全站变灰，不过这样达到的效果其实并不好。

羽凡兄弟给我建议是：其实只需要变灰这一个页面就好，其他页面正常，这个页面永远是灰的，不影响看其他页面是最好的。

网络上搜索的都全站变灰，没有具体单文章页变灰，以至于飞牛和 @林羽凡 都走进误区，折腾几次，林兄弟还准备本地安装wordpress实际操作一番。其实操作相对简单，只是我们走进了误区，最后飞牛还是尝试成功。

网络上普遍的代码是：将以下代码直接加到主题自定义样式中，即可实现全站变灰效果。

html{
-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- */
}

而如果想在单独的文章页面实现变灰效果，在两端加入<style>放入文章页面即可。

<style>html{
-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- */
}</style>

将上面的代码加入文章，代码界面（wordpress是文本，即非可视化页面）。

建议放在文章最末尾，这样列表页截取的文字不会截取到代码，而是截取到文字正文。

这样，当需要一些特殊节日或活动时，或者某些文章页面需要变灰的时候，可以将以下代码直接加到主题自定义样式中或者某个文章页面中即可实现。

© 文章系本站作者 飞牛 原创发布于「飞牛士 FeiNews」，文章授权后方可转载，请勿侵权！

赞 (0)
0 10

猜你喜欢

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

评论列表（10条）

  • 胖虎
    胖虎 2021-03-29 22:17

    学到了

    回复
  • 林羽凡
    林羽凡 2021-03-29 15:58

    可以可以，这样就完美了，哈哈哈哈

    回复
  • 哥斯拉
    哥斯拉 2021-03-28 23:19

    去那个页面看了一下，确实有效果

    回复
  • 夏目贵志
    夏目贵志 2021-03-28 22:40

    以前还有用 灰色透明图片的 让网站实现灰色。

    回复
    • 飞牛
      飞牛 2021-03-28 22:53

      @夏目贵志：用图片的话，如果加载慢，那还是先加载出正常颜色网页，然后再加载出灰色透明图片。

      回复
  • 王麻子
    王麻子 2021-03-28 07:47

    很实用。网上一堆人都是抄来抄去。缺乏原创。

    回复
    • 飞牛
      飞牛 2021-03-28 16:24

      @王麻子：确实的，我通常鄙视那种套个壳就说是原创，还设置隐藏回复可见，转载注明来源，这不是贻笑大方么。

      回复