使用場景

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

總結

以上是生活随笔為你收集整理的html点击图片换几种颜色,css实现点击给物品换颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。