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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

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

昌盛

奋发

逝者

生者

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

ostrichb

2020-04-04 01:03:19 +08:00 via Android

去看看网页的 css 你就懂了

hpj

2020-04-04 01:08:13 +08:00

看我，写了一篇。

Procumbens

2020-04-04 01:21:17 +08:00

VDimos

2020-04-04 02:53:51 +08:00 via Android

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

indev

2020-04-04 03:07:26 +08:00

也是刚刚学到的：

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

saozhu

2020-04-04 07:42:28 +08:00 via Android

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

wework

2020-04-04 08:59:14 +08:00

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

raincode

2020-04-04 09:39:26 +08:00

头条也是啊

zsdroid

2020-04-04 09:53:57 +08:00

百度 “哀悼 css”

ASmartPig

2020-04-04 10:54:17 +08:00

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

nnz

2020-04-04 13:09:54 +08:00

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

JackWolf001

2020-04-04 13:34:05 +08:00

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

JackWolf001

2020-04-04 13:34:52 +08:00

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

katoyu

2020-04-04 13:35:46 +08:00

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

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

AyaLee

2020-04-04 13:40:39 +08:00

@katoyu hhhhhhh

vinsec

2020-04-04 13:41:34 +08:00 via Android

@katoyu 哈哈哈哈哈哈哈

Telegram

2020-04-04 13:43:29 +08:00

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

ShallowAi

2020-04-04 13:46:06 +08:00 via Android

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

JackWolf001

2020-04-04 13:46:12 +08:00

@katoyu hhhhhhhhhh，这个可以

fixbugs

2020-04-04 13:47:54 +08:00 via Android

@katoyu hhh 这个厉害了

ArrayBuffer

2020-04-04 13:55:47 +08:00

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

katoyu

2020-04-04 13:58:46 +08:00

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

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-04-04 13:58:59 +08:00

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

DreamCMS

2020-04-04 14:01:55 +08:00

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

JackWolf001

2020-04-04 14:10:09 +08:00

#14 外交部应该是局部 filter

rzx0311

2020-04-04 14:21:39 +08:00

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

clague

2020-04-04 15:08:47 +08:00 via Android

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

dobelee

2020-04-04 15:12:22 +08:00 via iPhone

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

masker0817

2020-04-04 15:13:27 +08:00 via Android

我这里是彩色的

mytsing520

2020-04-04 15:16:01 +08:00

@katoyu 特定部分加灰白

mauve

2020-04-04 15:56:08 +08:00

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

vigack

2020-04-04 16:27:35 +08:00

@katoyu 哈哈太逗了

PhyllisLin

2020-04-04 16:51:14 +08:00 via Android

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

GPLer

2020-04-04 16:59:46 +08:00 via Android

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

VDimos

2020-04-04 17:07:00 +08:00 via Android

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

xushengbin888

2020-04-04 17:11:27 +08:00

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-04-04 17:54:10 +08:00

这个是外交部的 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-04-04 18:09:28 +08:00

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