用图片填充为文字背景技巧

二、需求分析：

文字要大，要粗。如果文字太小太细，效果是不明显的； 文字得是透明的。如果不透明的话，图片是没有办法填充上去的。

三、关键技术(css)：

/* 设置元素的背景（背景图片或颜色）是否延伸到内容盒子下面。*/
-webkit-background-clip: text;
background-clip: text;

四、整体代码参考：

html:

<span
    class="content"
>
    我需要显示的内容
</span>

css:

.content{
  font-size:64px;
  font-weight: 900;

/* 设置文字为透明（方法一）： */
  color: transparent;
/* 设置文字为透明（方法二）： */
  text-fill-color:transparent;
  -webkit-text-fill-color:transparent;

/* 设置用于填充的背景图 */
  background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2735805157,1742872573&fm=15&gp=0.jpg) 50% 50%;

/* 关键填充技术 */
  -webkit-background-clip:text;
  background-clip:text;
}

这样子，就能看到效果啦！

五、补充与扩展：

.demo{
/* 背景延伸至边框外沿（但是在边框下层） */
    background-clip:border-box;
/* 背景延伸至内边距（padding）外沿，不会绘制到边框处 */
    background-clip:padding-box;
/* 背景被裁剪至内容区（content box）外沿 */
    background-clip:content-box;
/* 背景被裁剪成文字的前景色 */
    -webkit-background-clip:text;
            background-clip:text;
}

一定要注意裁剪text要注意兼容！！！

效果如下：

完结！