mask-composite:exclude实现镂空的图像效果实例页面

展示

代码

• HTML：

  <img src="1.jpg" class="mask-image" width="256" height="192">

• CSS：

  .mask-image {
      --mask: url(../images/bird.png) no-repeat center / contain, 
          linear-gradient(black, black);
      -webkit-mask: var(--mask);
      mask: var(--mask);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
  }