做网站登录页面的论文it运维工程师简历

张

张建站

2026/4/9 3:02:25

10分钟阅读

做网站登录页面的论文,it运维工程师简历,wordpress动漫插件,网站高端建设开发公司创建项目如图所示创建一个基本的html项目我们就叫 outfit-change 导入图片一共有三张图片分别是原图衣服图和腰带图如图所示无水印的图片大家可以去https://www.doitwiki.com/article/details/181203990710272 里面下载大家自行导入即可效果模拟首先我们是把原图设…创建项目如图所示创建一个基本的html项目我们就叫 outfit-change导入图片一共有三张图片分别是原图衣服图和腰带图如图所示无水印的图片大家可以去https://www.doitwiki.com/article/details/181203990710272 里面下载大家自行导入即可效果模拟首先我们是把原图设置为背景图需要注意的是大家如果是自己扣的图衣服图片的位置和尺寸不要变然后我们把衣服和腰带覆盖到原图上面用定位的方式我们把衣服设置一下背景颜色通过mask蒙版的方式进行设置再用 mix-blend-mode的方式保留衣服的纹理效果代码如下!DOCTYPE html html head meta charsetutf-8 / title/title style typetext/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 classbox div classskirt belt-img/div div classskirt clothes-img/div /div /body /html自定义完整效果代码如下大概意思就是通过css变量来进行改变颜色其他的原理和上一步一样!DOCTYPE html html head meta charsetutf-8 / title换装/title style typetext/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[typecolor] { -webkit-appearance: none; border: none; width: 28px; height: 28px; cursor: pointer; background: none; padding: 0; } input[typecolor]::-webkit-color-swatch { border: 2px solid #f1f5f9; border-radius: 6px; } .label-text { font-size: 13px; color: #475569; } /style /head body div classcontainer div classcontrol-box span classsection-title衣服/span div classcolor-item input typecolor idcp1 value#ff4757 span classlabel-text色调 1/span /div div classcolor-item input typecolor idcp2 value#ff6b81 span classlabel-text色调 2/span /div /div div classmodel-view div classlayer clothes-layer/div div classlayer belt-layer/div /div div classcontrol-box span classsection-title腰带/span div classcolor-item input typecolor idbp1 value#2f3542 span classlabel-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