背景(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;