一个文字背景代码

将文字设置成为透明颜色再给文字设置背景图片

<!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>

一个文字背景代码

将文字设置成为透明颜色再给文字设置背景图片

效果图：