想问各位 V2 大佬， B 站今日黑白页是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2109 天前的主题，其中的信息可能已经有所发展或是发生改变。

在这深切哀悼在抗击新冠肺炎疫情斗争中牺牲的烈士和逝世同胞，愿逝者安息，愿生者奋发，愿祖国昌盛。

昌盛

奋发

逝者

生者

48 条回复 • 2020-04-05 18:36:18 +08:00

ostrichb

2020 年 4 月 4 日 via Android

去看看网页的 css 你就懂了

hpj

2020 年 4 月 4 日

看我，写了一篇。

Procumbens

2020 年 4 月 4 日

VDimos

2020 年 4 月 4 日 via Android

直接在 html 加滤镜，filter，不过这个玩意儿着实烦人的就是，ie 行为存在很大差距

indev

2020 年 4 月 4 日

也是刚刚学到的：

html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}

saozhu

2020 年 4 月 4 日 via Android

安卓的 app 似乎只有视频列表有效果，是不是说明这部分是 h5 呀

wework

2020 年 4 月 4 日

我发现首页的 favicon.ico 还是有颜色的

raincode

2020 年 4 月 4 日

头条也是啊

zsdroid

2020 年 4 月 4 日

百度 “哀悼 css”

ASmartPig

2020 年 4 月 4 日

安卓整个 APP 都灰了，热更新吗

nnz

2020 年 4 月 4 日

https://blog.bytebye.com/article/20200404aidao

JackWolf001

2020 年 4 月 4 日

应该是全局加 css 样式，ico 不影响吧

JackWolf001

2020 年 4 月 4 日

@ostrichb 虽然没在 B 站找到对应的 css，现在懂了

katoyu

2020 年 4 月 4 日

去看看外交部： https://www.fmprc.gov.cn/web/

这种怎么实现的啊？哈哈哈哈

AyaLee

2020 年 4 月 4 日

@katoyu hhhhhhh

vinsec

2020 年 4 月 4 日 via Android

@katoyu 哈哈哈哈哈哈哈

Telegram

2020 年 4 月 4 日

@katoyu #14 这个高级，领导人彩色。

ShallowAi

2020 年 4 月 4 日 via Android

html {filter: grayscale(100%)}
操作 1 CSS
<html style="filter: grayscale(100%)">
操作 2 内嵌 style

JackWolf001

2020 年 4 月 4 日

@katoyu hhhhhhhhhh，这个可以

fixbugs

2020 年 4 月 4 日 via Android

@katoyu hhh 这个厉害了

ArrayBuffer

2020 年 4 月 4 日

其实有好多网站都加了 `filter`, 但是好像只有 CSDN 把文章内容都加了灰度处理，连文章中的图片都是黑白的, 这样其实很影响阅读

katoyu

2020 年 4 月 4 日

来，给大家个变彩色的插件。

https://greasyfork.org/zh-CN/scripts/399436-%E6%B8%85%E6%98%8E%E8%8A%82%E8%A6%81%E6%8B%92%E7%BB%9D%E5%BC%BA%E8%A1%8C%E5%90%8A%E4%B8%A7

rrZ2C

2020 年 4 月 4 日

@katoyu #14 。。。。。。灰色大头照太有冲击力了

TOTOP

2020 年 4 月 4 日

全局灰色，彩色容器对灰色 unset

JackWolf001

2020 年 4 月 4 日

#14 外交部应该是局部 filter

rzx0311

2020 年 4 月 4 日

@katoyu 需求过于复杂难以实现

clague

2020 年 4 月 4 日 via Android

贴吧、b 站这些 app 之前有过黑白，应该是可以热更新实现的。

dobelee

2020 年 4 月 4 日 via iPhone

@katoyu #14 懂人脸识别的 css 。🐶

masker0817

2020 年 4 月 4 日 via Android

我这里是彩色的

mytsing520

PRO

2020 年 4 月 4 日

@katoyu 特定部分加灰白

mauve

PRO

2020 年 4 月 4 日

为什么🐻就得彩色
$.each($('img'), (_, img) => {
console.log(img.style= 'filter: grayscale(1)')
})

vigack

2020 年 4 月 4 日

@katoyu 哈哈太逗了

PhyllisLin

2020 年 4 月 4 日 via Android

https://web.archive.org/web/20200404015536/http://cpc.people.com.cn/

GPLer

2020 年 4 月 4 日 via Android

@VDimos 所以 IE 咋搞啊，头大。

VDimos

2020 年 4 月 4 日 via Android

@GPLer 我记得是用 DXImageTransform.Microsoft.BasicImage

xushengbin888

2020 年 4 月 4 日

163.com 也是的：
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter: none;
}

justfun

2020 年 4 月 4 日

这个是外交部的 CSS

.zbox_title,.pbox_left,.lj_black,.searchx,.fbox_left,.middle_pics_list,.wbox,.copyright_h,.foot_black,.tvbox_top{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
filter:gray !important;
}

GPLer

2020 年 4 月 4 日

@VDimos 试过了没用，网上传的方法对 IE 11 都无效，看了下外交部的官网也是用灰度化的图片覆盖在正常图片上实现的，通过纯 CSS 应该实现不了。