姚利锋

大体的需求就是使用单个节点 img 和单个类样式实现（场景要求）
- 具体实现方式就是通过 CSS 的 mask 属性来实现。
  1. 有两个图片，一个是遮罩图(透明背景 png)，一个是背景图(无格式要求)
  2. 主要使用 mask-composite 属性来设置遮罩图的合成方式
要求效果和结果图相似：
具体代码

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <title>Mask Demo</title>        <style>
            .mask-img {
                width: 500px;
                height: 500px;
                mask-image: url(背景图), url(遮罩图);
                mask-repeat: no-repeat;
                mask-mode: alpha;
                mask-position: center;
                mask-size: 100% 100%;
                mask-composite: subtract;
            }
        </style>    </head>    <body>        <img src="背景图" class="mask-img" />    </body></html>
  复制代码

特殊遮罩效果实现