CSS代码实现网站全站变灰

2022-11-30

原创字数统计: 297字 | 阅读时长: 1min

在一些特殊日子，有不少网站都将全站变灰表示哀悼，今天我就来揭秘一下，这是如何实现的。

其实原理非常简单，我们可以通过CSSfilter属性实现，具体来说就是给html标签添加如下CSS样式：

Tips:
可以直接在CSS文件添加如下代码
可以通过grayscale值来调整元素的灰度值

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

针对Hexo博客，我们可以在主题文件夹中找到layout/_partial/head.ejs文件，然后将以下代码放入<head> </head>标签中：

<style type="text/css">
  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>

针对VuePress建站的网站，我们可以直接更改.vuepress/styles/index.scss文件，在该文件中放入以下代码：

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

赏

感觉不错支持一下

本文作者： 三水
最后更新： 2022年11月30日 21:30:46
本文链接： https://sanshui.findn.cn/post/cb72f2a0.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！