html+css+js 实现衣服颜色自定义更换的换装系统

眷恋
原创
发布时间: 2026-01-28 14:31:01 | 阅读数 0收藏数 0评论数 0
前端
html
css
换装
封面
本文将介绍一个基于 HTML + CSS + JavaScript 实现的极简网页换装系统，通过 CSS Mask（遮罩）+ CSS 变量 + 原生 JS 的方式，实现对衣服、配饰颜色的实时自定义更换。 系统无需 Canvas、WebGL 或复杂图像处理，仅依赖前端原生能力，即可在保持服装纹理细节的同时，实现渐变上色、多部件分层叠加与高性能渲染。用户通过颜色选择器即可即时调整服装与腰带配色，交互流畅，结构清晰，适合用于 虚拟试衣、角色定制、游戏换装、商品展示 等场景。
1

创建项目

图片
  1. 如图所示创建一个基本的html项目 我们就叫 outfit-change
2

导入图片

向左
向右
图片
123

一共有三张图片 分别是 原图 衣服图和腰带图 如图所示 附件里也可以下载 大家自行导入即可

PNG
belt.png
102.84KB
PNG
body.png
1.83MB
PNG
clothes.png
834.06KB
3

效果模拟

图片


首先我们是把原图设置为背景图 需要注意的是 大家如果是自己扣的图衣服图片的位置和尺寸不要变， 然后 我们把衣服和 腰带覆盖到原图上面 用定位的方式，我们把衣服设置一下背景颜色 通过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>
4

自定义完整效果

图片


代码如下 大概意思就是通过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>
5

效果演示

效果演示看视频

阅读记录0
点赞0
收藏0
禁止 本文未经作者允许授权，禁止转载
更多相关项目
猜你喜欢
评论/提问(已发布 0 条)
评论 评论
收藏 收藏
分享 分享
pdf下载 下载
pdf下载 举报