背景(background)
在CSS3之前我们对背景图片的控制极为有限，只能决定其来源、位置、重复，CSS3开辟了一篇新天地
背景的基本属性
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的展示方式
background-attachment 背景图片是固定还是滚动
-
backround-position 背景图片位置
background-position百分比计算公式:
background-postion:x y; x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。 y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
background-size(背景图片大小)
background-size: 长度值 ｜ 百分比 | cover | contain
百分比是相对于元素的百分比
cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain 缩放背景图片以完全装入背景区，可能背景区部分空白。
background-origin(背景图片相对什么位置来定位)
这个属性要和background-position结合来看,
backgound-origin设置background-position的参考坐标
background-origin: border-box | padding-box | content-box;
- border-box: 根据边框盒来定位
- padding-box: 根据内边界盒来定位
- content-box: 根据内容框来定位
background-clip(可以理解成背景的大小)
这个属性用了裁剪背景的大小
background-clip: border-box | padding-box | content-box | text;
同上
简写
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;
