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

V2EX = way to explore

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

For Existing Member Sign In

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

This topic created in 2218 days ago, the information mentioned may be changed or developed.

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

昌盛

奋发

逝者

生者

48 replies • 2020-04-05 18:36:18 +08:00

ostrichb

Apr 4, 2020 via Android

去看看网页的 css 你就懂了

hpj

Apr 4, 2020

看我，写了一篇。

Procumbens

Apr 4, 2020

VDimos

Apr 4, 2020 via Android

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

indev

Apr 4, 2020

也是刚刚学到的：

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

saozhu

Apr 4, 2020 via Android

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

wework

Apr 4, 2020

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

raincode

Apr 4, 2020

头条也是啊

zsdroid

Apr 4, 2020

百度 “哀悼 css”

ASmartPig

Apr 4, 2020

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

nnz

Apr 4, 2020

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

JackWolf001

Apr 4, 2020

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

JackWolf001

Apr 4, 2020

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

katoyu

Apr 4, 2020

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

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

AyaLee

Apr 4, 2020

@katoyu hhhhhhh

vinsec

Apr 4, 2020 via Android

@katoyu 哈哈哈哈哈哈哈

Telegram

Apr 4, 2020

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

ShallowAi

Apr 4, 2020 via Android

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

JackWolf001

Apr 4, 2020

@katoyu hhhhhhhhhh，这个可以

fixbugs

Apr 4, 2020 via Android

@katoyu hhh 这个厉害了

ArrayBuffer

Apr 4, 2020

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

katoyu

Apr 4, 2020

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

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

Apr 4, 2020

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

TOTOP

Apr 4, 2020

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

JackWolf001

Apr 4, 2020

#14 外交部应该是局部 filter

rzx0311

Apr 4, 2020

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

clague

Apr 4, 2020 via Android

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

dobelee

Apr 4, 2020 via iPhone

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

masker0817

Apr 4, 2020 via Android

我这里是彩色的

mytsing520

PRO

Apr 4, 2020

@katoyu 特定部分加灰白

mauve

PRO

Apr 4, 2020

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

vigack

Apr 4, 2020

@katoyu 哈哈太逗了

PhyllisLin

Apr 4, 2020 via Android

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

GPLer

Apr 4, 2020 via Android

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

VDimos

Apr 4, 2020 via Android

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

xushengbin888

Apr 4, 2020

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

Apr 4, 2020

这个是外交部的 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

Apr 4, 2020

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