首先设置文字大小，加粗，设置一个背景，是这样的效果

  font-size: 50px;

  font-weight: bold;

  background: url('https://images.cnblogs.com/cnblogs_com/mxiaoli/1534426/t_timg.jpg')no-repeat;

再加上这一句，你会发现背景图片消失了

  -webkit-background-clip: text;

再加一句 color: transparent;就是这样的效果

如果你还想更花里胡哨一点，可以加动画让它动起来,就像这样

WXML代码:

 <view class="bg">小黎，低头是题海，抬头是远方 There are no shortcuts to any place worth reaching</view>

WXSS代码:

.bg {

  font-size: 16px;

  font-weight: bold; 

  color: transparent;

  background: url('https://images.cnblogs.com/cnblogs_com/mxiaoli/1534426/t_timg.jpg');

  -webkit-background-clip: text;

  animation: move 20s linear infinite;

}

[@keyframes](/user/keyframes) move {

  0% {

    background-position: left;

  }

  50% {

    background-position: right;

  }

  100% {

    background-position: left;

  }

}

总结：-webkit-background-clip:text;这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。再通过设置文字颜色为透明，就能出现这样的效果
注意：-webkit-background-clip: text;属性必须写在设置背景属性之后。因为设置在之前裁剪什么，空气么？