标签：ati enter abs web 运用 pre sof text 属性
文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。
使用 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; }
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
<div class="pic2"> image </div>
.pic2{ width: 500px; height: 500px; margin: 40px auto; background: url("1.jpg") no-repeat center center; background-size: cover; font-size: 120px; font-weight: bold; text-align: center; line-height: 500px; /*很重要*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
缺点：只支持webkit内核的浏览器，兼容性差。
标签：ati enter abs web 运用 pre sof text 属性
原文地址：https://www.cnblogs.com/hellocd/p/textbg.html
