html点击图片换几种颜色,css实现点击给物品换颜色

使用场景

1 .如果只是基于一张图片，通过css就能实现换颜色，那么购物网站其实每次可以只穿一张图片，只需要换样式就可以了,这种情况下，当商品的可选颜色越多，那么网站每次需要传递的图片就越少，服务器那里也只需要存储颜色即可。优势就越大

2 .可以实现用户自定义物品的样式，比如鞋子的颜色，用户可以选择丰富的颜色来先预览自己想要定制的鞋子颜色，非常的方便

3 .例子地址https://codepen.io/kylewetton/pen/OJLmJoV

原理

1 .先用一个svg path对物体进行描边，然后填充描边的颜色

2 .mix-blend-mode: multiply核心是给path添加这个属性

3 .把path绘制的路径提到图片的上面.z-index

4 .也就是底图要是白色的。这样才能正确显示覆盖的颜色

mix-blend-mode: multiply

1 .css的混合模式

2 .normal:正常模式

3 .mutiply:正片叠底

4 .screen:滤色

5 .overlay:叠加

6 .darken:变暗

7 .lightten:变亮

8 .color-dodge:颜色减淡

9 .color-burn:颜色加深

10 .hard-light:强光

11 .soft-light:柔光

12 .difference:差值

13 .exclusion:排除

14 .hue:色相

15 .statyration:饱和度

16 .color:颜色

17 .luminosity:亮度

18 .initial:初始值

19 .inherit:继承

20 .unset:复原

额外属性

1 .isolation:issolate

2 .background-blend-mode