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

实战：CSS3制作文字背景图"/>

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

文字带上渐变色，或者说让文字透出图片。这些效果 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： 76727