V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
sevenQu
V2EX  ›  JavaScript

如何改变网站主题颜色时,让图片中指定部分的颜色跟着变化?

  •  
  •   sevenQu · 2022-12-11 11:16:57 +08:00 · 2256 次点击
    这是一个创建于 704 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在改变网站主题颜色,例如改成由黑白主题改成蓝色主题

    我想让网站中的图片跟着一起改变,例如将人物图片的衣服全部改成蓝色主题

    直接切换图片不太能满足要求,因为我希望让用户输入他想要的主题颜色

    我的源素材是图片

    求大佬指点

    14 条回复    2022-12-17 22:57:15 +08:00
    xell
        1
    xell  
       2022-12-11 11:48:49 +08:00
    debuggerx
        2
    debuggerx  
       2022-12-11 12:20:18 +08:00 via Android
    感觉用 background-color 和 mix-blend-mode 就可以
    Track13
        3
    Track13  
       2022-12-11 12:46:04 +08:00 via Android   ❤️ 1
    要不手机壳也一起变颜色吧。
    Moeyua
        4
    Moeyua  
       2022-12-11 12:57:32 +08:00 via iPhone
    有个奇怪的点子,可以考虑把衣服扣掉,搞成透明图层,然后改变 background color 就行了🤣
    dcsuibian
        5
    dcsuibian  
       2022-12-11 13:06:51 +08:00 via Android
    svg 做的卡通小人还有可能
    真人图片就算能做,违和感估计也会非常严重
    callmesmc
        6
    callmesmc  
       2022-12-11 14:49:04 +08:00 via iPhone
    可以不直接在调色盘上选,就让用户红黄蓝绿紫选一个,图片准备五套
    kensoz
        7
    kensoz  
       2022-12-11 15:24:17 +08:00
    位图可以试试 css 滤镜,就是效果可能不太好
    chenjau
        8
    chenjau  
       2022-12-11 15:38:54 +08:00
    考虑到衣服这种复杂且没有固定模式的图片, 这个需求做不了的, 至少没法做的完美, 且普适.
    56rhcrivs55TVKdX
        9
    56rhcrivs55TVKdX  
       2022-12-11 19:50:37 +08:00
    @Moeyua 我也想到这个
    biubiu001
        10
    biubiu001  
       2022-12-12 09:03:36 +08:00
    如果你的主题是通过 css 变量控制的话,做个 SVG ,然后也通过 CSS 变量控制,这有个参考一下: https://dianjie.github.io/tdesign-console/#/result/404
    libook
        11
    libook  
       2022-12-12 09:51:04 +08:00 via Android
    如果图片整个改,可以用 filter 变变颜色,但如果只变图片里的一部分的话,可能需要 AI 抠图。
    heishu
        12
    heishu  
       2022-12-12 10:08:59 +08:00
    svg 可以搞,图片只改衣服颜色的话搞不出来
    krixaar
        13
    krixaar  
       2022-12-12 11:48:07 +08:00
    都是矢量图还能搞,如果是现成照片的话,得上 AI 。
    sevenQu
        14
    sevenQu  
    OP
       2022-12-17 22:57:15 +08:00
    感谢各位大佬的回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5424 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:50 · PVG 14:50 · LAX 22:50 · JFK 01:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.