介绍background-clip给你

      首先上一张背景知识图。

       background-clip用来确定背景的裁剪区域，可取以下值：

      1.border-box:此值为默认值，背景从border区域向外裁剪，超出部分将被裁剪掉。为了看的更明显，我将padding和border设置为20px；

 padding: 20px;
 border: dashed 20px rgba(152,10,3,0.8);
 background-color: cornflowerblue;

 

      现在将背景图片写入：

background-image: url("img/flower.PNG");

 

      2.padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉。而且此时背景色和背景图片起点终点都一致。

 background-clip: padding-box;

      3、context-box：背景从content区域向外裁剪，超过content区域的背景将被裁剪掉；

 background-clip:content-box;

 

      4、text：图片填充字体本身，从我查阅的情况来看目前仅带-webkit-前缀支持该值。下图分别是使用一副油画和粉笔纹理做的填充。我们还可以给图片添加动画等，从而制作各种酷炫效果。文字的表达是无力的，戳链接，看看别人怎么玩的：https://scotch.io/demos/background-clip-text-1（三个demo，第一个有hover效果。）