CSS实现为文字添加背景

布满荆棘的人生 2021-07-27 02:17 503阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5MTc0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200511153730508.png]  
css：  
下面有详解

body{
        margin: 0;
        padding: 0%;
        font-family: "Montserrat",sans-serif;
        background: #333;
    }
    h1{
        font-size: 200px;
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        margin: 0;
        background: url(../images/bd.jpg) 50% 50%;
        background-size: cover;
        -webkit-text-fill-color:transparent;
        background-clip: text;
        -webkit-background-clip: text;
    }

虽然ps也可以实现 哈哈哈  
详解：

body{ 
        margin: 0;
        padding: 0;
        /* 设置字体样式 */
        font-family: "Montserrat",sans-serif;
        /* 设置背景色 */
        background: #333;
    }
    h1{ 
        /* 字体大小 */
        font-size: 200px;
        /* 字母转化为大写 */
        text-transform: uppercase;
        /* 设置字体的粗细 */
        font-weight: 900;
        /* 设置字母之间的间距 */
        letter-spacing: 20px;
        /* 绝对定位 */
        position: absolute;
        /*实现彻底的居中，top，left，是以左上角为原点居中， translate是以xy轴移动半个自身大小 */
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    
        margin: 0;
        /* background-image和background-position的和写， 后面的50%是位置 */
        background: url(../images/bd.jpg) 50% 50%;
        /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 */
        background-size: cover;
        /* 镂空字体 */
        -webkit-text-fill-color:transparent;
        /* 使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪， 文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 */
        background-clip: text;
        -webkit-background-clip: text;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5MTc0_size_16_color_FFFFFF_t_70]: /images/20210726/b1f4a0a7d7654289972f6b5223a63f00.png
[20200511153730508.png]: /images/20210726/38d48d25254440aba944f33ef634b59e.png