先看效果图片：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>给文本文字添加图片背景</title>
<style>
h1{
margin:0;
padding:0 0 20px;
font-size:180px;
line-height:180px;
letter-spacing:-1px;
color:rgba(0, 0, 0, 0.2);
-webkit-font-smoothing: antialiased;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2NkQAU+jEh8HyB7C0wAzAFJggTgHJAAAFXuA1E5qtLyAAAAAElFTkSuQmCC);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
</style>
</head>
<body>
<h1>霍者</h1>
</body>
</html>
代码说明：
letter-spacing 设置文本文字的间距
-webkit-font-smoothing: antialiased; 让页面里的字体变清晰
-webkit-background-clip:text; 规定背景的绘制区域
-webkit-text-fill-color:transparent; 检索或设置对象中的文字填充颜色
