我们知道盒子或方形容器里面可以通过 background-image: url(…);设置背景图片，而文字的设置背景图却甚少，其实文字也可以像盒子里放背景图的。

 

解决方案：

1.写一个div标签，里面写文字。

 

<div class="ceshi">

     给字体添加背景图片。

</div>

 

2.写css

 

.ceshi{

       height: 100px;

       width: 710px;

      line-height: 100px;

      font-size: 40px;

      font-weight: 1000;

      color: rgba(78, 75, 75,.1);

      background-image: url(2.jpg);

      background-size: 28% 140%;

      -webkit-background-clip: text;

      text-transform:uppercase;        

 

}

 

*url里写入自己的图片地址

 

*最后两行

-webkit-background-clip: text;

text-transform:uppercase;

是实现效果重点，其它都是是背景图或字体的样式。

 

3.注意，如果没效果，是因为它在有些浏览器是不兼容的。

 

效果