图像函数实现的mask遮罩效果实例页面

展示

代码

• HTML：

  <h4>image-set()</h4>
  <img src="1.jpg" class="mask-image image-set">
  
  <h4>cross-fade()</h4>
  <img src="1.jpg" class="mask-image cross-fade">
  
  <h4><span id="title">element()</span></h4>
  <img src="1.jpg" class="mask-image element">

• CSS：

  .image-set {
      -webkit-mask-image: -webkit-image-set(url(bird.png) 1x, url(triangle.svg) 2x);
      mask-image: image-set(url(bird.png) 1x, url(triangle.svg) 2x);
  }
  .cross-fade {
      -webkit-mask-image: -webkit-cross-fade(url(bird.png), url(triangle.svg), 50%);
      mask-image: cross-fade(url(bird.png), url(triangle.svg), 50%);
  }
  .element {
      -webkit-mask-image: -webkit-element(#title);
      mask-image: -moz-element(#title);
      mask-image: element(#title);
  }