web前端入门到实战：CSS3制作文字背景图

最新推荐文章于 2024-09-09 09:00:00 发布

魔方编程

最新推荐文章于 2024-09-09 09:00:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端 Web前端前端开发前端教程

本文链接：https://blog.csdn.net/wewfdf/article/details/100932024

本文介绍了两种使用CSS3实现文字带有背景图片效果的方法。方法一是通过`mix-blend-mode:lighten;`属性，将黑色文字与图片结合，达到文字透出图片的效果。方法二是利用`-webkit-background-clip:text;`，让文字区域显示背景，但兼容性有限，仅适用于webkit内核浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。

方法一、利用CSS3属性mix-blend-mode:lighten;实现

使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 即可，简单原理如下：

核心代码如下：

<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>
.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
    position: absolute;
    width:100%;
    height:100%;
    color: #000;
    mix-blend-mode: lighten;
    background-color: #fff;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

方法二、-webkit-background-clip:text;

使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区

最低0.47元/天解锁文章

200万优质内容无限畅学