背景(background)
在CSS3之前我們對(duì)背景圖片的控制極為有限，只能決定其來源嗦董、位置居兆、重復(fù)，CSS3開辟了一篇新天地
背景的基本屬性
background-color 背景顏色
background-image 背景圖片
background-repeat 背景圖片的展示方式
background-attachment 背景圖片是固定還是滾動(dòng)
-
backround-position 背景圖片位置
background-position百分比計(jì)算公式:
background-postion:x y; x：{容器(container)的寬度—背景圖片的寬度}*x百分比感混，超出的部分隱藏端幼。 y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏弧满。
background-size(背景圖片大小)
background-size: 長(zhǎng)度值∑排堋｜ 百分比 | cover | contain
百分比是相對(duì)于元素的百分比
cover 縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見
contain 縮放背景圖片以完全裝入背景區(qū)庭呜，可能背景區(qū)部分空白滑进。
background-origin(背景圖片相對(duì)什么位置來定位)
這個(gè)屬性要和background-position結(jié)合來看,
backgound-origin設(shè)置background-position的參考坐標(biāo)
background-origin: border-box | padding-box | content-box;
- border-box: 根據(jù)邊框盒來定位
- padding-box: 根據(jù)內(nèi)邊界盒來定位
- content-box: 根據(jù)內(nèi)容框來定位
background-clip(可以理解成背景的大小)
這個(gè)屬性用了裁剪背景的大小
background-clip: border-box | padding-box | content-box | text;
同上
簡(jiǎn)寫
background: [background-color] || [background-image] ||
[background-repeat] || [background-attachment] ||
[background-position] / [ background-size] ||
[background-origin] || [background-clip];
多背景圖片
可以為同一背景添加多張背景圖片, 這種寫法不支持加顏色和background-clip
background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;
