background-clip背景切割

Posted 2020-11-20 asassa

一、背景切割

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平铺的时候:

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

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

二、 背景原点

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

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

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