前端 CSS 经典：模特换装效果

yqcoder

已于 2024-05-17 10:14:09 修改

阅读量311

点赞数 4

分类专栏：前端 CSS 经典文章标签： css 前端

于 2024-05-17 10:11:58 首次发布

本文链接：https://blog.csdn.net/weixin_64684095/article/details/138997775

版权

前端 CSS 经典专栏收录该内容

38 篇文章 3 订阅

订阅专栏

前言：通过使用 mask 蒙版，mix-blend-mode 混合模式，实现模特换装效果。

1. 准备工作

首先需要准备两张图片，一张是全身图，需要换装的部分要求要是白色，为什么要是白色呢，因为在使用 mix-blend-mode 混合模式时，需要将上层颜色和下层颜色混合，如果下层颜色是白色，那么混合后的颜色，就是上层的颜色。第二张图片是要换装的部分，宽高大小需要和第一张图片一致，方便后续定位到全身图的相对位置。其他地方透明。换装的地方不透明，随便什么颜色。方便使用 mask 蒙版更换颜色。

2. 例子

使用 mask 蒙版， mix-blend-mode 混合模式，实现换装

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .card {
        width: 300px;
        height: 500px;
        position: relative;
        margin: 200px auto;
        background: blue;
      }
      .source {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .skirt {
        position: absolute;
        inset: 0;
        background: #f40;
        --mask: url("../../images/每日博客/模特换装效果/yf.png") 50% 50% / cover;
        mask: var(--mask);
        -webkit-mask: var(--mask);
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <img class="source" src="../../images/每日博客/模特换装效果/demo.jpg" />
      <div class="skirt"></div>
    </div>
  </body>
</html>