background-clip背景切割

一、背景切割

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,一般一起使用,一个控制背景的显示尺寸,一个控制背景的位置

猜你喜欢

转载自www.cnblogs.com/asassa/p/9222142.html
今日推荐