建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供咸豐網(wǎng)站建設(shè)、咸豐做網(wǎng)站、咸豐網(wǎng)站設(shè)計、咸豐網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、咸豐企業(yè)網(wǎng)站模板建站服務(wù)，十余年咸豐做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
- background-color：設(shè)置元素的背景顏色；
- background-image：設(shè)置元素的背景圖像；
- background-repeat：控制背景圖像是否重復(fù)；
- background-attachment：控制背景圖像是否跟隨窗口滾動；
- background-position：控制背景圖像在元素中的位置；
- background-size：設(shè)置背景圖像的尺寸；
- background-origin：設(shè)置 background-position 屬性相對于什么位置來定位背景圖像；
- background-clip：設(shè)置背景圖像的顯示區(qū)域；
- background：背景屬性的縮寫，可以在一個聲明中設(shè)置所有的背景屬性。
1. background-color
您可以使用 background-color 屬性為元素設(shè)置一個背景顏色，該屬性支持以下幾種屬性值：
| 值 | 描述 |
|---|---|
| color_name | 使用具體顏色名稱為元素設(shè)置背景顏色（例如 red） |
| hex_number | 使用十六進制碼為元素設(shè)置背景顏色（例如 #ff0000） |
| rgb_number | 使用 rgb() 函數(shù)為元素設(shè)置背景顏色（例如 rgb(255,0,0)） |
| transparent | 默認(rèn)值，設(shè)置背景顏色為透明，大多數(shù)情況下我們并不會用到它。但如果您不希望某個元素擁有背景顏色，或者不希望用戶對瀏覽器的設(shè)置（比如開啟夜間模式、護眼模式）影響到您的設(shè)計，那么就可以使用 transparent 來將顏色設(shè)置為透明的 |
| inherit | 從父元素繼承對背景顏色的設(shè)置 |
【示例】使用 background-color 為元素設(shè)置背景顏色：
CSS背景
background-color 屬性
運行結(jié)果如下圖所示：
圖：background-color 屬性演示
通過運行結(jié)果可以看出 background-color 屬性能夠為元素設(shè)置一種純色的背景，這種顏色會填充元素的內(nèi)容、內(nèi)邊距以及邊框區(qū)域（也可以理解為邊框及以內(nèi)的所有區(qū)域），對于元素邊框以外的區(qū)域（外邊距）則沒有影響。
關(guān)于 CSS 中的顏色您可以閱讀《CSS顏色》一節(jié)。
2. background-image
background-image 用來為某個元素設(shè)置背景圖像，默認(rèn)情況下瀏覽器會從元素內(nèi)容的左上角開始（若有內(nèi)邊距則從元素內(nèi)邊距區(qū)域的左上角開始），在水平和垂直方向上重復(fù)背景圖像，以填充整個元素區(qū)域，您可以使用 background-repeat 屬性來控制背景圖像是否重復(fù)或如何重復(fù)。
background-image 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| url('URL') | 指向圖像的路徑，可以將 url() 看作是一個函數(shù)，括號中的 URL 為圖像的具體路徑 |
| none | 默認(rèn)值，不顯示背景圖像 |
| inherit | 從父元素繼承背景圖像的設(shè)置 |
【示例】使用 background-image 屬性將圖片【
】設(shè)置為元素的背景圖像：
CSS背景
background-image 屬性
運行結(jié)果如下圖所示：
圖：background-image 屬性演示
背景圖像的覆蓋區(qū)域與背景顏色相同，同樣會填充元素的內(nèi)容、內(nèi)邊距以及邊框區(qū)域，對于元素邊框以外的區(qū)域（外邊距）則沒有影響。
3. background-repeat
默認(rèn)情況下背景圖像會從元素內(nèi)容的左上角開始（若有內(nèi)邊距則從元素內(nèi)邊距區(qū)域的左上角開始），在水平和垂直方向上重復(fù)背景圖像以填充整個元素區(qū)域（不包括元素的外邊距區(qū)域），您可以使用 background-repeat 屬性用來設(shè)置背景圖像是否重復(fù)或如何重復(fù)，該屬性的可選值如下：
| 值 | 描述 |
|---|---|
| repeat | 默認(rèn)值，背景圖像將在垂直方向和水平方向上重復(fù) |
| repeat-x | 背景圖像僅在水平方向上重復(fù) |
| repeat-y | 背景圖像僅在垂直方向上重復(fù) |
| no-repeat | 背景圖像僅顯示一次，不在任何方向上重復(fù) |
| inherit | 從父元素繼承 background-repeat 屬性的設(shè)置 |
【示例】使用 background-repeat 屬性讓背景圖像只在水平方向上重復(fù)：
CSS背景
background-repeat 屬性
運行結(jié)果如下圖所示：
圖：background-repeat 屬性演示
4. background-position
background-position 屬性用來設(shè)置背景圖像的起始位置，該屬性的可選值如下：
| 值 | 描述 |
|---|---|
| left top（左上）、 left center（左中）、 left bottom（左下）、 right top（右上）、 right center（右中）、 right bottom（右下）、 center top（中上）、 center center（居中）、 center bottom（中下） |
使用一些關(guān)鍵詞表示背景圖像的位置，如果您僅設(shè)置第一個關(guān)鍵詞，那么第二個將默認(rèn)為 center |
| x% y% | 使用百分比表示背景圖像距離元素左上角的距離，x% 為水平方向，y% 為垂直方向，左上角為 0% 0%，右下角是 100% 100%，如果您僅設(shè)置第一個值，那么另一個值將是 50%，默認(rèn)值為 0% 0% |
| xpos ypos | 使用像素（px）或者其它 CSS 單位表示背景圖像距離元素左上角的距離，xpos 為水平方向，ypos 為垂直方向，左上角為 0px 0px，右下角視元素的尺寸而定，百分比和單位的形式可以混用，如果您僅設(shè)置第一個值，那么另一個值將默認(rèn)為 50% |
【示例】使用 background-position 屬性來設(shè)置背景圖像的位置：
CSS背景
background-position 屬性
運行結(jié)果如下圖所示：
圖：background-position 屬性演示
5. background-attachment
background-attachment 屬性用來設(shè)置背景圖像是固定在某個位置還是跟隨頁面一起滾動，該屬性的可選值如下：
| 值 | 描述 |
|---|---|
| scroll | 默認(rèn)值，背景圖像隨著頁面元素的滾動而移動 |
| fixed | 當(dāng)頁面的其余部分滾動時，背景圖像固定不動 |
| inherit | 從父元素繼承 background-attachment 屬性的設(shè)置 |
【示例】使用 background-attachment 屬性將背景圖像固定在屏幕的頂部：
CSS背景
background-position 屬性
background-position 屬性
background-position 屬性
background-position 屬性
background-position 屬性
background-position 屬性
運行結(jié)果如下圖所示：
圖：background-attachment 屬性演示
6. background-size
background-size 屬性用來設(shè)置背景圖像的尺寸，該屬性的可選值如下：
| 值 | 描述 |
|---|---|
| xpos ypos | 使用像素（px）或其它 CSS 單位來設(shè)置背景圖像的高度和寬度，xpos 表示寬度，ypos 表示高度，如果只設(shè)置第一個值，那么第二個值將被設(shè)置為默認(rèn)值 auto（自動） |
| x% y% | 使用百分比表示背景圖像相對于所在元素寬度與高度的百分比，x% 表示寬度，y% 表示高度，如果只設(shè)置第一個值，那么第二個值將被設(shè)置為默認(rèn)值 auto（自動） |
| cover | 保持背景圖像的橫縱比例并將圖像縮放至足夠大，使背景圖像可以完全覆蓋元素所在的區(qū)域，這么做可能會導(dǎo)致背景圖像的某些部分超出元素區(qū)域而無法顯示 |
| contain | 保持背景圖像的橫縱比例并將圖像縮放至足夠大，使背景圖像可以完整的顯示在元素所在區(qū)域，背景圖像可能無法完全覆蓋整個元素區(qū)域 |
【示例】使用 background-size 屬性設(shè)置背景圖像的尺寸，并將背景圖像橫向鋪滿整個元素區(qū)域：
CSS背景
background-size 屬性
運行結(jié)果如下圖所示：
圖：background-size 屬性演示
7. background-origin
background-origin 是 CSS3 中新增的屬性。在使用 background-position 屬性來設(shè)置背景圖像的位置時，默認(rèn)是以元素左上角的位置來計算的。您還可以使用 background-origin 屬性來設(shè)置 background-position 屬性相對哪個位置來定位背景圖像，background-origin 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| padding-box | 相對于元素的內(nèi)邊距區(qū)域來定位背景圖像 |
| border-box | 相對于元素的邊框區(qū)域來定位背景圖像 |
| content-box | 相對于元素的內(nèi)容區(qū)域來定位背景圖像 |
【示例】使用 background-origin 屬性設(shè)置背景圖像相對于元素的邊框區(qū)域來定位：
CSS背景
background-origin 屬性
運行結(jié)果如下圖所示：
圖：background-origin 屬性演示
8. background-clip
background-clip 是 CSS3 中新增的屬性，通過它可以設(shè)置背景圖像的顯示區(qū)域。background-clip 屬性的可選值如下：
| 值 | 說明 |
|---|---|
| border-box | 默認(rèn)值，在元素邊框及以內(nèi)的區(qū)域顯示背景圖像 |
| padding-box | 在元素內(nèi)邊距及以內(nèi)的區(qū)域顯示背景圖像 |
| content-box | 在元素內(nèi)容區(qū)域顯示背景圖像 |
【示例】通過 background-clip 屬性設(shè)置背景圖像僅在元素內(nèi)容區(qū)域顯示：
CSS背景
background-clip 屬性
運行結(jié)果如下圖所示：
圖：background-clip 屬性演示
9. background
background 是背景屬性的簡寫形式，通過它不僅可以為元素設(shè)置某個背景屬性，還可以同時設(shè)置多個或者所有的背景屬性。在設(shè)置多個背景屬性時并沒有固定的順序，但推薦使用如下順序進行設(shè)置：
background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip
在設(shè)置多個背景屬性時，有以下幾點需要注意：
- 每個屬性之間使用空格進行分隔；
- 如果同時設(shè)置 background-position 和 background-size 屬性，這兩個屬性之間需要使用斜線
/分隔，并且需要遵循 background-position 屬性在前 background-size 屬性在后的順序； - 如果同時設(shè)置 background-origin 和 background-clip 屬性，需要遵循 background-origin 屬性在前 background-clip 屬性在后的順序。如果 background-origin 與 background-clip 屬性的值相同，則可以只設(shè)置一個值。
【示例】通過 background 同時設(shè)置多個背景屬性：
CSS背景
background 屬性
運行結(jié)果如下圖所示：
圖：background 屬性演示
background 屬性還支持設(shè)置多組屬性值（比如上面示例中的
#ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box就可以看作是一組屬性），每組屬性值之間使用逗號
,分隔。但需要注意的是 background-color 屬性不能設(shè)置多個，并且只能在最后一組屬性值中設(shè)置。
如果設(shè)置的多組屬性中，背景圖像之間存在重疊，那么前面設(shè)置的背景圖像會覆蓋在后面的背景圖像之上。示例代碼如下：
CSS背景
運行結(jié)果如下圖所示：
圖：多重背景層疊效果
當(dāng)前名稱：CSSbackground（背景）
標(biāo)題網(wǎng)址：http://fisionsoft.com.cn/article/coddico.html
