本篇文章為大家展示了CSS中怎么使用background屬性實現背景圖片，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
在css中，共有如下幾個background屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| background | 在一個聲明中設置所有的背景屬性。 | 1 |
| background-attachment | 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 | 1 |
| background-color | 設置元素的背景顏色。 | 1 |
| background-image | 設置元素的背景圖像。 | 1 |
| background-position | 設置背景圖像的開始位置。 | 1 |
| background-repeat | 設置是否及如何重復背景圖像。 | 1 |
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
從表格中，我們可以看出 background-clip ，background-origin和 background-size是css3中新增的屬性。
CSS Code復制內容到剪貼板
`background`-`clip`：border-box | padding-box | content-box | no-clip
用來確定背景的裁剪區域。
引擎類型 Gecko Webkit Presto：
CSS Code復制內容到剪貼板
background-clip -moz-background-clip -webkit-background-clip -o-background-clip
注：本屬性不支持IE6,7,8
一張圖看懂三個屬性值的區別：
CSS Code復制內容到剪貼板
background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
cover： 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
背景圖像的某些部分也許無法顯示在背景定位區域中。
contain ：把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
CSS Code復制內容到剪貼板
background-origin ： border | padding | content
取值：
border： 從border區域開始顯示背景。
padding： 從padding區域開始顯示背景。
content： 從content區域開始顯示背景。
CSS3的背景圖片設置
1. 背景圖片起始位置 background-origin
| background-origin | 值 |
|---|---|
| border-box | 邊框 |
| padding-box | 內邊距（默認值） |
| content-box | 內容區域 |
background-origin ： border-box | padding-box | content-box;
注意: 背景必須設為no-repeat
2. 背景圖片裁剪 background-clip
| background-clip | 值 |
|---|---|
| border-box | 邊框（默認值） |
| padding-box | 內邊距 |
| content-box | 內容區域 |
| no-clip | 不裁剪,與border-box效果相同 |
3. 設置背景圖片的大小 background-size
| background-size | 值 |
|---|---|
| auto | 默認值，不改變背景圖片的原始高度和寬度 |
| 長度值 | 成對出現如200px 50px, 只設置一個值, 等比例縮放 |
| 百分比 | 0％~100％之間的任何值, 只設置一個值, 等比例縮放 |
| cover | 覆蓋, 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。 |
| contain | 容納, 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。 |
上述內容就是CSS中怎么使用background屬性實現背景圖片，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
