创建项目
如图所示创建一个基本的html项目 我们就叫 outfit-change
导入图片
一共有三张图片 分别是 原图 衣服图和腰带图 如图所示 无水印的图片大家可以去https://www.doitwiki.com/article/details/181203990710272 里面下载大家自行导入即可
效果模拟
首先我们是把原图设置为背景图 需要注意的是 大家如果是自己扣的图衣服图片的位置和尺寸不要变， 然后 我们把衣服和 腰带覆盖到原图上面 用定位的方式，我们把衣服设置一下背景颜色 通过mask蒙版的方式进行设置 再用 mix-blend-mode的方式保留衣服的纹理效果 代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { position: relative; width: 250px; height: 200px; margin: 0 auto; margin-top: 150px; background: url(./img/body.png) no-repeat center/contain; } .skirt { width: 100%; position: absolute; inset: 0; /* 让背景图宽度撑满容器 */ } .belt-img { background-color: green; mask: url("./img/belt.png") no-repeat center/contain; mix-blend-mode: multiply; } .clothes-img { background-color: red; mask: url("./img/clothes.png") no-repeat center/contain; mix-blend-mode: multiply; } </style> </head> <body> <div class="box"> <div class="skirt belt-img"></div> <div class="skirt clothes-img"></div> </div> </body> </html>自定义完整效果![]()
代码如下 大概意思就是通过css变量来进行改变颜色 其他的原理和上一步一样
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>换装</title> <style type="text/css"> :root { /* 使用 CSS 变量管理颜色，方便 JS 实时修改 */ --clothes-c1: #ff4757; --clothes-c2: #ff6b81; --belt-color: #2f3542; } body { background-color: #f0f2f5; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: system-ui, sans-serif; } .container { display: flex; align-items: center; gap: 60px; /* 侧边栏与模特之间的间距 */ } /* --- 模特展示区 --- */ .model-view { position: relative; width: 320px; height: 480px; /* 身体原图作为底层背景 */ background: url("./img/body.png") no-repeat center/contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1)); } .layer { position: absolute; inset: 0; /* 统一遮罩配置：不重复、居中、自适应大小 */ -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; /* 混合模式保留底图纹理：暗部叠加 */ mix-blend-mode: multiply; } .clothes-layer { background: linear-gradient(135deg, var(--clothes-c1), var(--clothes-c2)); -webkit-mask-image: url("./img/clothes.png"); mask-image: url("./img/clothes.png"); } .belt-layer { background: var(--belt-color); -webkit-mask-image: url("./img/belt.png"); mask-image: url("./img/belt.png"); } /* --- 侧边选择面板 --- */ .control-box { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); width: 140px; } .section-title { font-size: 12px; color: #94a3b8; font-weight: bold; display: block; margin-bottom: 15px; letter-spacing: 1px; } .color-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } /* 美化 input color */ input[type="color"] { -webkit-appearance: none; border: none; width: 28px; height: 28px; cursor: pointer; background: none; padding: 0; } input[type="color"]::-webkit-color-swatch { border: 2px solid #f1f5f9; border-radius: 6px; } .label-text { font-size: 13px; color: #475569; } </style> </head> <body> <div class="container"> <div class="control-box"> <span class="section-title">衣服</span> <div class="color-item"> <input type="color" id="cp1" value="#ff4757"> <span class="label-text">色调 1</span> </div> <div class="color-item"> <input type="color" id="cp2" value="#ff6b81"> <span class="label-text">色调 2</span> </div> </div> <div class="model-view"> <div class="layer clothes-layer"></div> <div class="layer belt-layer"></div> </div> <div class="control-box"> <span class="section-title">腰带</span> <div class="color-item"> <input type="color" id="bp1" value="#2f3542"> <span class="label-text">单色</span> </div> </div> </div> <script> // 缓存根节点提升性能 const rootStyle = document.documentElement.style; // 衣服控制：处理两个色块合并为渐变 const handleClothesChange = () => { rootStyle.setProperty('--clothes-c1', document.getElementById('cp1').value); rootStyle.setProperty('--clothes-c2', document.getElementById('cp2').value); }; // 皮带控制：直接修改变量 const handleBeltChange = (e) => { rootStyle.setProperty('--belt-color', e.target.value); }; // 绑定事件 document.getElementById('cp1').oninput = handleClothesChange; document.getElementById('cp2').oninput = handleClothesChange; document.getElementById('bp1').oninput = handleBeltChange; </script> </body> </html>
