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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容