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,通常一塊兒使用，一個控制背景的顯示尺寸，一個控制背景的位置