使用场景
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