将文字设置成为透明颜色再给文字设置背景图片
<!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>
效果图：
