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

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

html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
html点击图片产生事件,javascript里怎么实现点击图片弹出对话框？
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...
html文字滑动时改变颜色,css实现滚动时选中区域字体颜色加深的示例代码
在封装日期选择器时,需要选中时字体颜色加深,先看一下实现后的效果可以看到加深的不是整个文字,而是中间那片区域今天聊的重点不在选择器的封装,主要看这个样式效果,想了解此组件的实现思路可以看之前的文章日 ...
java绘制图片验证码两种方式实现，点击【图片】刷新和点击【看不清换一张】刷新
转载地址:https://blog.csdn.net/Jiang_Rong_Tao/article/details/78063295 点击打开链接 1.(看不清,换一张),点击刷新验证码 <im ...
android 点击变色的两种情况、textview点击变色以及自定义checkbox
注意,对于布局类型的,设置clickable=true 1.不需要使用shape的情况 drawable下新建一个资源文件,在需要的地方setbackground <?xml version=& ...
html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图
前提安装插件 npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vu ...
html radio 默认图片替换_用纯CSS改变html radio/checkbox默认背景颜色样式
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.然后利用新元素的背景颜色或背景图片覆盖掉原来的样式. CSS代码: ...
html:点击图片放大到全屏，再次点击缩回
做手机网页开发时,经常遇到的效果:点击某个不加链接的图片时,图片放大,当再次点击放大的图片时,图片缩回(实质上将层隐藏掉了). 实现思路: 准备原材料:一个遮档整个屏幕的不透明接近黑色的背景层(< ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...

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

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

最新文章

热门文章