The effect is as follows
Specific code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS图像填充文字</title>
<style>
.text {
background-image: url(./imgs/1.webp);
/* 一定要让背景透明，这样后面的背景能透出来 */
color: transparent;
font-size: 50px;
text-align: center;
/* 以 盒子内 文字 作为 裁剪区域 ，向外 裁剪，文字之外 的 区域 都将 被 裁剪掉 */
-webkit-background-clip: text;
/* 这行代码是为了不让vscode报警告 */
background-clip: text;
}
</style>
</head>
<body>
<div class="text">
<h3>CSS</h3>
<p>CSS图像填充文字</p>
</div>
</body>
</html>