text-fill-color与渐变图像、常规图像文字填充效果实例页面

展示

代码

• HTML：

  <span class="text-fill-gradient">文字渐变填充效果</span>
  
  <span class="text-fill-url">文字URL图像填充效果</span>

• CSS：

  .text-fill-gradient,
  .text-fill-url {
      font-size: 60px;  
  }
  @supports (-webkit-text-fill-color: transparent) {
      .text-fill-gradient {
          -webkit-text-fill-color: transparent;
          background: linear-gradient(to right, skyblue, deeppink, deepskyblue);
          -webkit-background-clip: text;
      }
      .text-fill-url {
          -webkit-text-fill-color: transparent;
          background: url(./nature-1.jpg) no-repeat center / 100%;
          -webkit-background-clip: text;
      }
  }