mask-image SVG图像的遮罩效果实例页面

展示

代码

• HTML：

  <img src="8.jpg" class="mask-image" width="256" height="174">

• CSS：

  .mask-image {
      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
  
      -webkit-mask-image: var(--svg);
      mask-image: var(--svg);
  
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
  }