-webkit-background-clip:text

你可以通过使用 -webkit-background-clip:text 将文字之外的区域都将被裁剪掉

本篇文章的标题就使用了此效果

Demo

<style type="text/css">
h1 {
    background-image:url(https://img.uncode.top/images/2020/07/25/2Tj.jpg);
    background-position-y:80%;
    -webkit-background-clip:text;
}
</style>

<h1>测试文字 测试文字</h1>

但是……运行效果是这样的：img

别忘了文字是带颜色的，所以我们需要用color: transparent把文字颜色设置成透明：

<style type="text/css">
h1 {
    background-image:url(https://img.uncode.top/images/2020/07/25/2Tj.jpg);
    background-position-y:80%;
    -webkit-background-clip:text;
    color: transparent;
}
</style>

<h1>测试文字 测试文字</h1>

这样就对了：img2