将文字设置成为透明颜色再给文字设置背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{ margin:0px;
padding:0px;
font-family:"黑体";
background:red;}
h1{ font-size: 200px;
text-transform:uppercase; /*定义文本中的大小写，uppercase仅有大写字母 */
font-weight: 900px;
/*定义文本的粗细，从100~900*/
letter-spacing:1px;
/*设置字母间距*/
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
/*position & transform: translate(-50%, -50%) 20 实现块元素百分比下居中*/
margin:0;
background:url(1.jpg) 50% 50%;
/*背景图片路径和size大小*/
background-size:cover;
/*此时会保持图像的纵横比*/
/*并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
-webkit-text-fill-color:transparent;
/*text-fill-color是设置指定文字的填充颜色，transparent透明*/
-webkit-background-clip: text;
/*背景绘制在text区域内，剪切成文字形状*/ }</style>
</head>
<body>
<h1>干嘛呢</h1>
</body>
</html>
效果图：
