通过CSS实现服装切换效果（mask-image/mix-blend-mode）

写在开头

哈喽，各位好啊😀，小编今天在网上冲浪的时候，发现了一个挺有趣的服装切换效果。

原效果地址：传送门

它是通过 CSS 的 mask-image 属性和 mix-blend-mode 属性来实现的。

代码实现

这里小编以 Vue 的技术来实现，来看看具体的代码实现：

javascript 复制代码

<template>
  <div>
    <h1>服装效果切换</h1>
    <div class="content">
        <img class="clothing" src="./assets/clothing.png" />
        <div class="clothing-overlay">
            <div :style="{ backgroundImage: `url(${backgroundImage})` }"
              class="clothing-pattern"
            />
            <img class="clothing-low-template"
              src="./assets/clothingLowTemplate.png"
            />
        </div>
    </div>
    <div class="tool">
      <div
        @click="handleClick(item)"
        v-for="(item, index) in templateData"
        :key="index"
        class="tool-item"
       >
          <img :src="item.image" />
       </div>
    </div>
  </div>
</template>

<script>
import template1 from "./assets/template1.png";
import template2 from "./assets/template2.png";
import template3 from "./assets/template3.png";
import template4 from "./assets/template4.png";

export default {
  data() {
    return {
        templateData: [
            { image: template1 },
            { image: template2 },
            { image: template3 },
            { image: template4 },
        ],
        backgroundImage: "",
    };
  },
  methods: {
    handleClick(item) {
      this.backgroundImage = item.image;
    },
  },
};
</script>

<style>
body {
    background-color: #404749;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1 {
    text-align: center;
    color: #fff;
}
.content {
    width: 280px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.clothing {
    width: 100%;
    height: 100%;
}
.clothing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.clothing-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url(./assets/clothingMask.png);
    mask-image: url(./assets/clothingMask.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    display: block;
}
.clothing-low-template {
    width: 100%;
    mix-blend-mode: multiply;
    position: relative;
}
.tool {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.tool-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    margin: 0 10px;
    cursor: pointer;
}
</style>

整体实现并不难，核心需要注意两个 CSS 属性：

mask-image ：元素蒙版层的图像。这个图像一般是一张图片，你可以认为该属性会把一张图片完整覆盖在一个元素上，无论这个元素是任何形状，都会完整包裹，并且最重要的一点，当这个元素有透明部分时，这部分透明区域是不被包裹的。

mix-blend-mode：元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。这个属性经常被用于处理文字的颜色上，通过它能让文字的颜色呈现更有趣的效果，这里小编找了一个案例，你可以点进去看看应该就能大概明白了传送门。而本文的应用是将它用于一张底图背景上，用于制作服装的纹理效果，具体如下：

（如果你熟悉 Photoshop 的话，它其实就是 PS 的 "混合模式" 而已 👻 ）

兼容性

它们的兼容性也还不错。

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。

老样子，点赞+评论=你会了，收藏=你精通了。