background-clip背景切割

1、背景切割

1.使用场景：当插入图片不能正常显示，或须要调整时

2 . 属性：background-clip:border-box/   padding-box/  content-box

3. 做用：为将背景图片作适当的裁剪，以适应须要。

4. 默认格式 background-clip ：border-box，border的区域也有背景图，可是背景图图片是从border-top和border-left的位置开始平铺的，因此当背景图片no-repeat的时候，border-top和border-left的背景是背景色不是背景图，只有当背景repeat的时候，border-top和border-left才是背景图，而且border-top和border-left的背景是从图片的下边和右边开始平铺的。

默认背景图：

 

当背景使用no-repeat时：

 

 

图片显示是从边框盒的右边和下边显示的，上边和左边是没有内容的。

 

当使用repeat平铺的时候:

背景的内容已经填充上去，但不是咱们想要的效果，上边和左边是否是平涂内容。

这个时候咱们就要用到背景原点

2、 背景原点

1. 属性：background-orgin:border-box /padding-box  /content -box

2. 做用：决定图片的原始起始位置

3.background-orgin:border-box和background-clip：border-box,通常一块儿使用，一个控制背景的显示尺寸，一个控制背景的位置