mask遮罩PNG小图标变色效果实例页面

展示

代码

• HTML：

  <a href="javascript:" id="buttonDelete"><i class="icon-delete"></i> 删除</a>

• CSS：

  .icon-delete {
      display: inline-block;
      width: 20px; height: 20px;
      background-color: currentColor;
      --mask: url(/images/8/delete@2x.png) no-repeat center / 1.125em 1.125em;
      -webkit-mask: var(--mask);
      mask: var(--mask);
  
      vertical-align: -4px;
  }