先展示一下最终效果：
开始做
1. 搭建基本代码结构
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS图像填充文字（镂空文字效果）</title></head><body><div class="text">CSS图像填充文字</div></body></html>
2. 设置样式，给文字所在的盒子设置背景图片
我所用到的背景图：该步骤代码展示：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS图像填充文字</title><style>* {margin: 0;padding: 0;}.text {width: 100vw;height: 100vh;background: url('Images/1000666.jpg') no-repeat center;background-size: contain;color: #fff;font-size: 100px;font-weight: 700;text-align: center;line-height: 100vh;}</style></head><body><div class="text">CSS图像填充文字</div></body></html>
效果展示：
3. 添加文字裁剪属性 + 设置文字颜色为透明色
-webkit-background-clip: text;该属性的意思：以 盒子内 文字 作为 裁剪区域 ，向外 裁剪，文字之外 的 区域 都将 被 裁剪掉
注意： 在vsCode编辑器中，只写这么一个属性会有警告；效果也是能够正常显示的；想要去掉这个警告，只需添加一行代码即可实现：
background-clip: text;
该步骤代码展示：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS图像填充文字</title><style>* {margin: 0;padding: 0;}.text {width: 100vw;height: 100vh;background: url('Images/1000666.jpg') no-repeat center;background-size: contain;/* color: #fff; *//* 将文字颜色设置为透明色 */color: transparent;font-size: 100px;font-weight: 700;text-align: center;line-height: 100vh;/* 文字裁剪属性 */background-clip: text; /* 添加这个式为了 VsCode 给出警告 */-webkit-background-clip: text; /* 主要属性 */}</style></head><body><div class="text">CSS图像填充文字</div></body></html>
效果展示：
至此已经实现了文字镂空效果；
