V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JackWolf001
V2EX  ›  程序员

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

  •  
  •   JackWolf001 · 2020-04-04 01:01:47 +08:00 · 9487 次点击
    这是一个创建于 603 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    48 条回复    2020-04-05 18:36:18 +08:00
    ostrichb
        1
    ostrichb   2020-04-04 01:03:19 +08:00 via Android
    去看看网页的 css 你就懂了
    hpj
        2
    hpj   2020-04-04 01:08:13 +08:00
    看我,写了一篇。
    Procumbens
        3
    Procumbens   2020-04-04 01:21:17 +08:00
    <style>html.gray{-webkit-filter:grayscale(.95)}</style>
    VDimos
        4
    VDimos   2020-04-04 02:53:51 +08:00 via Android
    直接在 html 加滤镜,filter,不过这个玩意儿着实烦人的就是,ie 行为存在很大差距
    indev
        5
    indev   2020-04-04 03:07:26 +08:00   ❤️ 3
    也是刚刚学到的:

    html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    }
    saozhu
        6
    saozhu   2020-04-04 07:42:28 +08:00 via Android
    安卓的 app 似乎只有视频列表有效果,是不是说明这部分是 h5 呀
    wework
        7
    wework   2020-04-04 08:59:14 +08:00
    我发现首页的 favicon.ico 还是有颜色的
    raincode
        8
    raincode   2020-04-04 09:39:26 +08:00
    头条也是啊
    zsdroid
        9
    zsdroid   2020-04-04 09:53:57 +08:00
    百度 “哀悼 css”
    ASmartPig
        10
    ASmartPig   2020-04-04 10:54:17 +08:00
    安卓整个 APP 都灰了,热更新吗
    nnz
        11
    nnz   2020-04-04 13:09:54 +08:00
    JackWolf001
        12
    JackWolf001   2020-04-04 13:34:05 +08:00
    应该是全局加 css 样式,ico 不影响吧
    JackWolf001
        13
    JackWolf001   2020-04-04 13:34:52 +08:00
    @ostrichb 虽然没在 B 站找到对应的 css,现在懂了
    katoyu
        14
    katoyu   2020-04-04 13:35:46 +08:00   ❤️ 21
    去看看外交部: https://www.fmprc.gov.cn/web/

    这种怎么实现的啊?哈哈哈哈
    AyaLee
        15
    AyaLee   2020-04-04 13:40:39 +08:00
    @katoyu hhhhhhh
    vinsec
        16
    vinsec   2020-04-04 13:41:34 +08:00 via Android
    @katoyu 哈哈哈哈哈哈哈
    Telegram
        17
    Telegram   2020-04-04 13:43:29 +08:00
    @katoyu #14 这个高级,领导人彩色。
    ShallowAi
        18
    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
        19
    JackWolf001   2020-04-04 13:46:12 +08:00
    @katoyu hhhhhhhhhh,这个可以
    fixbugs
        20
    fixbugs   2020-04-04 13:47:54 +08:00 via Android
    @katoyu hhh 这个厉害了
    ArrayBuffer
        21
    ArrayBuffer   2020-04-04 13:55:47 +08:00
    其实有好多网站都加了 `filter`, 但是好像只有 CSDN 把文章内容都加了灰度处理,连文章中的图片都是黑白的, 这样其实很影响阅读
    rrZ2C
        23
    rrZ2C   2020-04-04 13:58:59 +08:00
    @katoyu #14 。。。。。。 灰色大头照 太有冲击力了
    DreamCMS
        24
    DreamCMS   2020-04-04 14:01:55 +08:00
    全局灰色,彩色容器对灰色 unset
    JackWolf001
        25
    JackWolf001   2020-04-04 14:10:09 +08:00
    #14 外交部应该是局部 filter
    rzx0311
        26
    rzx0311   2020-04-04 14:21:39 +08:00
    @katoyu 需求过于复杂 难以实现
    clague
        27
    clague   2020-04-04 15:08:47 +08:00 via Android   ❤️ 1
    贴吧、b 站这些 app 之前有过黑白,应该是可以热更新实现的。
    dobelee
        28
    dobelee   2020-04-04 15:12:22 +08:00 via iPhone
    @katoyu #14 懂人脸识别的 css 。🐶
    masker0817
        29
    masker0817   2020-04-04 15:13:27 +08:00 via Android
    我这里是彩色的
    mytsing520
        30
    mytsing520   2020-04-04 15:16:01 +08:00
    @katoyu 特定部分加灰白
    mauve
        31
    mauve   2020-04-04 15:56:08 +08:00
    为什么🐻就得彩色
    $.each($('img'), (_, img) => {
    console.log(img.style= 'filter: grayscale(1)')
    })
    vigack
        32
    vigack   2020-04-04 16:27:35 +08:00
    @katoyu 哈哈太逗了
    PhyllisLin
        33
    PhyllisLin   2020-04-04 16:51:14 +08:00 via Android
    GPLer
        34
    GPLer   2020-04-04 16:59:46 +08:00 via Android
    @VDimos 所以 IE 咋搞啊,头大。
    VDimos
        35
    VDimos   2020-04-04 17:07:00 +08:00 via Android
    @GPLer 我记得是用 DXImageTransform.Microsoft.BasicImage
    xushengbin888
        36
    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
        37
    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
        38
    GPLer   2020-04-04 18:09:28 +08:00
    @VDimos 试过了没用,网上传的方法对 IE 11 都无效,看了下外交部的官网也是用灰度化的图片覆盖在正常图片上实现的,通过纯 CSS 应该实现不了。
    jmyz0455
        39
    jmyz0455   2020-04-04 18:30:03 +08:00
    @GPLer 你说的对,我也是 IE 搞了好久 @_@
    kimjosda
        40
    kimjosda   2020-04-04 18:55:16 +08:00
    可以用:not()伪类选中不需要灰度化的部分吗
    感觉貌似可以让整个页面灰度化,局部被排除的可以保持原色(没试过)
    fvckDaybyte2
        41
    fvckDaybyte2   2020-04-04 19:05:33 +08:00
    @katoyu 搞独彩
    dangod0
        42
    dangod0   2020-04-04 20:12:00 +08:00
    @fvckDaybyte2 月底名单。。
    input2output
        43
    input2output   2020-04-04 20:19:37 +08:00
    Caan07
        44
    Caan07   2020-04-04 21:23:44 +08:00
    @katoyu #14 外交部的一语双关真的太聪明了,可以吃顿饺子了。
    christin
        45
    christin   2020-04-04 21:46:01 +08:00 via iPhone
    ios 客户端直接把底部购买商品的界面取消了 不知道是什么原因
    zxCoder
        46
    zxCoder   2020-04-04 23:19:19 +08:00
    @indev 有些人可以黑白,有些人不能黑白。
    wshxchxc
        47
    wshxchxc   2020-04-05 15:28:45 +08:00 via Android
    把饱和度调低就可以了。
    stupil
        48
    stupil   2020-04-05 18:36:18 +08:00
    去哪网的,今天依旧是黑白的。。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2102 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 05:51 · PVG 13:51 · LAX 21:51 · JFK 00:51
    ♥ Do have faith in what you're doing.