使用場景

1 .如果只是基于一張圖片，通過css就能實現(xiàn)換顏色，那么購物網(wǎng)站其實每次可以只穿一張圖片，只需要換樣式就可以了,這種情況下，當(dāng)商品的可選顏色越多，那么網(wǎng)站每次需要傳遞的圖片就越少，服務(wù)器那里也只需要存儲顏色即可。優(yōu)勢就越大
2 .可以實現(xiàn)用戶自定義物品的樣式，比如鞋子的顏色，用戶可以選擇豐富的顏色來先預(yù)覽自己想要定制的鞋子顏色，非常的方便
3 .例子地址https://codepen.io/kylewetton/pen/OJLmJoV

原理

1 .先用一個svg path對物體進(jìn)行描邊，然后填充描邊的顏色
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:復(fù)原

額外屬性

1 .isolation:issolate
2 .background-blend-mode