background-clip的一个应用小技巧

在我的前端学习之路上，background-clip这个属性可谓是平平无奇，跟其他的背景属性之间感觉没有太多的区别。但实际上，这个属性只要在前面加上一点支持对应浏览器的内核兼容的前缀，就能发挥出让人眼前一亮的效果! 那么这个效果是什么呢？下面请先看效果展示：

这个效果的实现方式就是让background-clip按文字裁切。 HTML代码如下:

<style>
div{
  width: 600px;        
  height: 600px;           
  border: 2px solid red;           
  background-image: url("Dio.png");          
  background-size: 500px 500px;          
  -webkit-background-clip: text;          
  color: transparent;           
  text-align: center;           
  line-height: 500px;          
  font-size: 500px;      
}
</style>
<div>❤</div>

这里的background-clip属性有一个特殊之处，那就是前面加上了一个前缀-webkit- 这表示针对谷歌浏览器内核引擎的支持。加上这么一个前缀之后，我们的background-clip属性里面就多了很多新的可选值了。
例如我们这个例子用到的text 如果想正确的发挥出这个效果，需要注意两个点

1. 一定要设置文字属性，比如设置文字大小、文字居中等
2. 一定要设置文字的颜色为transparent，否则就不能看到背景设置的图片了
   这里div里面的文字可以随便换成任意的你想要的东西。例子里设置了一下div的边框和颜色是为了直观的展示出div的大小，对其他效果没有影响。