网站一键置灰

leader755

发布于 2022-03-09 14:35:20

1.2K0

发布于 2022-03-09 14:35:20

文章被收录于专栏：万丈高楼平地起

背景：某些时候，需要让网站一键变灰。只需要短短几行代码就能做到。

1.直接上代码

直接在 html 上加上此样式，搞定。

<style>
  html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
  }
</style>

2.hexo 博客一键置灰（按博主的实际情况来）

1>找到 head.ejs

首先找到 hexo 博客 theme 下当前使用的主题文件，/themes/halo/layout/_partial/head.ejs(针对自己的)，加入以下

<!-- 网站置灰,做成可配置的文件 -->
<% if (theme.graywebsite.enable) { %>
<link
  rel="stylesheet"
  type="text/css"
  href="<%- theme.jsDelivr.url %>/css/gray.css"
/>
<% } %>

2>新建 gray.css

在 /themes/halo/source/css/ 下新建 gray.css 文件，并写入以下代码:

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}

3>.配置 _config.yml

# 网站一键置灰
graywebsite:
  enable: false

4>大工告成

访问网站 http://www.leader755.com，只会在特定的时间开启哦。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-05-22，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

css

hexo

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

css

hexo

登录后参与评论

0 条评论

热度

网站一键置灰

网站一键置灰

1.直接上代码

2.hexo 博客一键置灰（按博主的实际情况来）

1>找到 head.ejs

2>新建 gray.css

3>.配置 _config.yml

4>大工告成

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐