CSS3對背景圖片的裁剪及尺寸和位置設定方法

這篇文章主要介紹“CSS3對背景圖片的裁剪及尺寸和位置設定方法”，在日常操作中，相信很多人在CSS3對背景圖片的裁剪及尺寸和位置設定方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3對背景圖片的裁剪及尺寸和位置設定方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

背景裁剪

CSS Code復制內容到剪貼板

1. background-clip:border-box|padding-box|content-box|text  

用于指定background是否包含content之外的border,padding。默認值為border-box，即background從包含border在內的地方開始渲染，IE的默認表現也等同于border-box
背景從border(即包括border在內)開始繪制（渲染）

CSS Code復制內容到剪貼板

1. #background-clip-border{   

2.  -moz-background-clip:border-box;           /* For Firefox */  

3.  -webkit-background-clip:border-box;        /* For Chrome, Safari */  

4.  -o-background-clip:border-box;             /* For Opera */  

5.  -ms-background-clip:border-box;            /* For IE */  

6.  background-clip:border-box;                /* For Future */  

7. }  

背景從padding(即包括padding在內)開始繪制：

CSS Code復制內容到剪貼板

1. #background-clip-padding{   

2.  -moz-background-clip:padding-box;           /* For Firefox */  

3.  -webkit-background-clip:padding-box;        /* For Chrome, Safari */  

4.  -o-background-clip:padding-box;             /* For Opera */  

5.  -ms-background-clip:padding-box;            /* For IE */  

6.  background-clip:padding-box;                /* For Future */  

7. }  

背景從content(即內容部分)開始繪制：

CSS Code復制內容到剪貼板

1. #background-clip-content{   

2.  -moz-background-clip:content-box;           /* For Firefox */  

3.  -webkit-background-clip:content-box;        /* For Chrome, Safari */  

4.  -o-background-clip:content-box;             /* For Opera */  

5.  -ms-background-clip:content-box;            /* For IE */  

6.  background-clip:content-box;                /* For Future */  

7. }  

將背景裁剪作為文本的填充色：

CSS Code復制內容到剪貼板

1. /* 如果你的瀏覽器支持text值，你將會看到本段文字的顏色直接使用了背景顏色：紅色，且背景將被裁剪掉不再顯示 */  

2. #background-clip-text{   

3.  background-color:#f00;   

4.  -webkit-text-fill-color:transparent;   

5.  -webkit-background-clip:text;               /* For Chrome, Safari */  

6.  background-clip:text;                       /* For Future */  

7. }  

背景圖片位置

CSS Code復制內容到剪貼板

1. background-origin:border-box|padding-box|content-box  

以border(即包括border)為原點計算背景圖的background-position：

CSS Code復制內容到剪貼板

1. #background-origin-border{   

2.  -moz-background-origin:border-box;         /* For Firefox */  

3.  -webkit-background-origin:border-box;      /* For Chrome, Safari */  

4.  -o-background-origin:border-box;           /* For Opera */  

5.  -ms-background-origin:border-box;          /* For IE */  

6.  background-origin:border-box;              /* For Future */  

7. }  

以padding(即包括padding)為原點計算背景圖的background-position：

CSS Code復制內容到剪貼板

1. #background-origin-padding{   

2.  -moz-background-origin:padding-box;         /* For Firefox */  

3.  -webkit-background-origin:padding-box;      /* For Chrome, Safari */  

4.  -o-background-origin:padding-box;           /* For Opera */  

5.  -ms-background-origin:padding-box;          /* For IE */  

6.  background-origin:padding-box;              /* For Future */  

7. }  

以content(即從content開始)為原點計算背景圖的background-position：

CSS Code復制內容到剪貼板

1. #background-origin-content{   

2.  -moz-background-origin:content-box;         /* For Firefox */  

3.  -webkit-background-origin:content-box;      /* For Chrome, Safari */  

4.  -o-background-origin:content-box;           /* For Opera */  

5.  -ms-background-origin:content-box;          /* For IE */  

6.  background-origin:content-box;              /* For Future */  

7. }  

圖片背景尺寸

CSS Code復制內容到剪貼板

1. background-size:[length|percentage|auto]{1,2}|cover|contain  

 用于設置背景圖片的大小，有2個可選值，第1個值用于指定背景圖的width，第2個值用于指定背景圖的height，如果只指定1個值得，則第2個值默認為auto
數值表示方式：

CSS Code復制內容到剪貼板

1. #background-size{   

2.  background-size:300px 100px;   

3. }  

百分比表示方式：

CSS Code復制內容到剪貼板

1. #background-size2{   

2.  background-size:40% 80%;   

3. }  

等比擴展圖片來填滿元素，即cover值：

CSS Code復制內容到剪貼板

1. #background-size3{   

2.  background-size:cover;   

3. }  

等比縮小圖片來適應元素的尺寸，即contain值：

CSS Code復制內容到剪貼板

1. #background-size4{   

2.  background-size:contain;   

3. }  

以圖片自身大小來填充元素，即auto值：

CSS Code復制內容到剪貼板

1. #background-size5{   

2.  background-size:auto;   

3. }  

到此，關于“CSS3對背景圖片的裁剪及尺寸和位置設定方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！