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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

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

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

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

我的源素材是图片

求大佬指点

主题

图片

颜色

跟着

14 条回复 • 2022-12-17 22:57:15 +08:00

xell

2022-12-11 11:48:49 +08:00

那就（几乎）万能的 canvas 啰 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

debuggerx

2022-12-11 12:20:18 +08:00 via Android

感觉用 background-color 和 mix-blend-mode 就可以

Track13

2022-12-11 12:46:04 +08:00 via Android

要不手机壳也一起变颜色吧。

Moeyua

2022-12-11 12:57:32 +08:00 via iPhone

有个奇怪的点子，可以考虑把衣服扣掉，搞成透明图层，然后改变 background color 就行了🤣

dcsuibian

2022-12-11 13:06:51 +08:00 via Android

svg 做的卡通小人还有可能
真人图片就算能做，违和感估计也会非常严重

callmesmc

2022-12-11 14:49:04 +08:00 via iPhone

可以不直接在调色盘上选，就让用户红黄蓝绿紫选一个，图片准备五套

kensoz

2022-12-11 15:24:17 +08:00

位图可以试试 css 滤镜，就是效果可能不太好

chenjau

2022-12-11 15:38:54 +08:00

考虑到衣服这种复杂且没有固定模式的图片, 这个需求做不了的, 至少没法做的完美, 且普适.

56rhcrivs55TVKdX

2022-12-11 19:50:37 +08:00

@Moeyua 我也想到这个

biubiu001

2022-12-12 09:03:36 +08:00

如果你的主题是通过 css 变量控制的话，做个 SVG ，然后也通过 CSS 变量控制，这有个参考一下： https://dianjie.github.io/tdesign-console/#/result/404

libook

2022-12-12 09:51:04 +08:00 via Android

如果图片整个改，可以用 filter 变变颜色，但如果只变图片里的一部分的话，可能需要 AI 抠图。

heishu

2022-12-12 10:08:59 +08:00

svg 可以搞，图片只改衣服颜色的话搞不出来

krixaar

2022-12-12 11:48:07 +08:00

都是矢量图还能搞，如果是现成照片的话，得上 AI 。

sevenQu

2022-12-17 22:57:15 +08:00

感谢各位大佬的回复