1.1 背景顏色(color)
1.2 背景圖片(image)
background-image : none | url (url)
| 參數(shù) |
作用 |
| none |
無(wú)背景圖（默認(rèn)的） |
| url |
使用絕對(duì)或相對(duì)地址指定背景圖像 |
background-image : url(images/demo.png);
- 小技巧： 我們提倡 背景圖片后面的地址团秽，url不要加引號(hào)。
1.3 背景平鋪（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 參數(shù) |
作用 |
| repeat |
背景圖像在縱向和橫向上平鋪（默認(rèn)的） |
| no-repeat |
背景圖像不平鋪 |
| repeat-x |
背景圖像在橫向上平鋪 |
| repeat-y |
背景圖像在縱向平鋪 |
1.4 背景位置(position) 重點(diǎn)
background-position : length || length
background-position : position || position
| 參數(shù) |
值 |
| length |
百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 |
| position |
top | center | bottom | left | center | right 方位名詞 |
- 注意：
- 必須先指定background-image屬性
- position 后面是x坐標(biāo)和y坐標(biāo)渺贤。 可以使用方位名詞或者 精確單位贯底。
- 如果指定兩個(gè)值绩脆，兩個(gè)值都是方位名字岸啡，則兩個(gè)值前后順序無(wú)關(guān)伞矩，比如left top和top left效果一致
- 如果只指定了一個(gè)方位名詞渊额，另一個(gè)值默認(rèn)居中對(duì)齊瓢阴。
- 如果position 后面是精確坐標(biāo)畅蹂， 那么第一個(gè)，肯定是 x 第二的一定是y
- 如果只指定一個(gè)數(shù)值,那該數(shù)值一定是x坐標(biāo)荣恐，另一個(gè)默認(rèn)垂直居中
- 如果指定的兩個(gè)值是 精確單位和方位名字混合使用液斜，則第一個(gè)值是x坐標(biāo)，第二個(gè)值是y坐標(biāo)
實(shí)際工作用的最多的叠穆，就是背景圖片居中對(duì)齊了少漆。
1.5 背景附著
| 參數(shù) |
作用 |
| scroll |
背景圖像是隨對(duì)象內(nèi)容滾動(dòng) |
| fixed |
背景圖像固定 |
1.6 背景簡(jiǎn)寫
- background：屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性硼被，建議大家如下寫：
- background: 背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置;
- 語(yǔ)法：
background: transparent url(image.jpg) repeat-y scroll center top ;
1.7 背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
- 最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
- 我們習(xí)慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明示损， 盒子里面的內(nèi)容不受影響
- 因?yàn)槭荂SS3 ，所以 低于 ie9 的版本是不支持的嚷硫。
1.8 背景總結(jié)
| 屬性 |
作用 |
值 |
| background-color |
背景顏色 |
預(yù)定義的顏色值/十六進(jìn)制/RGB代碼 |
| background-image |
背景圖片 |
url(圖片路徑) |
| background-repeat |
是否平鋪 |
repeat/no-repeat/repeat-x/repeat-y |
| background-position |
背景位置 |
length/position 分別是x 和 y坐標(biāo)检访， 切記 如果有 精確數(shù)值單位，則必須按照先X 后Y 的寫法 |
| background-attachment |
背景固定還是滾動(dòng) |
scroll/fixed |
| 背景簡(jiǎn)寫 |
更簡(jiǎn)單 |
背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置; 他們沒有順序 |
| 背景透明 |
讓盒子半透明 |
background: rgba(0,0,0,0.3); 后面必須是 4個(gè)值 |
