飞牛士 飞牛士
  • 首页
  • 杂谈
  • 摘记
  • 代码
  • 资源
  • 注册
    登录
现在登录。
  • 首页
  • 杂谈
  • 摘记
  • 代码
  • 资源
  • 网友来稿
  • 其他
    • 留言
    • 投稿
    • 邻居
首页 代码 WordPress单页面变灰以及全站变灰代码

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

飞牛 3月 28, 2021

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

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

网络上搜索的都全站变灰,没有具体单文章页变灰,以至于飞牛和 @林羽凡 都走进误区,折腾几次,林兄弟还准备本地安装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是文本,即非可视化页面)。

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

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

#wordpress#wordpress技巧
0
飞牛
一个互联网资深菜鸟
评论 (10)
返回
  • 胖虎

    学到了

    1年 前 回复
  • 林羽凡

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

    1年 前 回复
    • 飞牛

      @林羽凡 还是得感谢你提醒和指导到位。

      1年 前 回复
    • 林羽凡

      @飞牛 客气了,主要是你执行力强。

      1年 前 回复
  • 哥斯拉

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

    1年 前 回复
    • 飞牛

      @哥斯拉 嗯,以后需要的时候就可以用了。

      1年 前 回复
  • 夏目贵志

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

    1年 前 回复
    • 飞牛

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

      1年 前 回复
  • 王麻子

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

    1年 前 回复
    • 飞牛

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

      1年 前 回复
飞牛
一个互联网资深菜鸟
76
文章
245
评论
28
获赞
随机推荐
说词【思辨】
3月 25, 2021
笔趣阁v8.0.20200119 安卓版无广告可换源
3月 10, 2021
解决多网站使用Redis或Memcached缓存冲突
3月 6, 2021
浏览器带壳截图推荐
3月 15, 2021
你所看到的真相,是否是真相!(深度)
2月 17, 2021
  • 关于飞牛
  • 给我留言
  • 友情链接
Copyright © 2006-2022 飞牛士.