CSS代码实现网站全局黑白

我们可以通过 CSS filter 属性实现，具体来说就是给 html 标签添加如下 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- */
}

可以通过 grayscale 值来调整元素的灰度值

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

(完）
本文《CSS代码实现网站全局黑白》版权由阿武的网志所有
除特别声明外，本站内容均默认采用：CC BY-NC-SA 4.0 许可协议
本文链接：https://blog.awu.cool/note/181.html
转载前请先征得博主同意，如已授权转载，转载时请标注来源。