dom结构相同，但是背景图颜色不同，要如何实现复用呢？

Question

RT
开发的页面中有很多卡片结构相同，但是就是顶部标题栏的背景图是颜色不同的图片（图片其实是一样的但是颜色不同而已），然后所以这样的话我倾向于做成复用的组件之类的，但是背景图我觉得所有的都切成图有点太蠢了，有没有比较好的方法呢？

Answer 1

考虑把颜色变化部分扣掉,改成透明,然后修改容器背景颜色

Answer 2

如果图片是插画等简单限条形式的背景图，可以考虑使用svg进行渲染，可以修改颜色。
如果是普通jpg/png这种图片，可以考虑盖一层彩色蒙版实现不同颜色。

Answer 3

背景图单纯颜色的话建议用背景色，封装顶部标题栏，通过传参判断更改颜色

Answer 4

雪碧图应该是最好的方式了
或者就是active变色之类的加判断了

Answer 5

组件可以复用，而背景色根据calss来区分，给组件传入一个props，值为class的值，这样根据class来渲染不同的背景色

Answer 6

如果是背景色不同的话，将背景图设置成动态，每个复用的地方，修改这个动态变量即可。