网站变灰实现源码微博在 style 标签中添加掘金淘宝在 style 标签中添加京东技术分析：这里主要是增

微博

在 style 标签中添加

.grayTheme {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        filter: gray;
      }

掘金

<html lang="zh" class="gray-mode" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22zh%22%7D,%22class%22:%7B%22ssr%22:%22gray-mode%22%7D%7D"><head>
............

html.gray-mode {
    filter: grayscale(.95);
    -webkit-filter: grayscale(.95);
}

淘宝

在 style 标签中添加

  body, html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

京东

<html class="o2_mini csstransitions cssanimations o2_webkit o2_chrome o2_latest o2_gray"><head>

html.o2_gray {
    /* -webkit-filter: grayscale(100%); */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

技术分析：

这里主要是增加了CSS 的一个filter（滤镜）属性。
grayscale ：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；