CSS学习笔记：background

CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值:

• background-origin
• background-clip
• background-size

三个盒子

content-box

padding-box

border-box

以上三个盒子用于确定背景图片的起始位置、以何种尺寸显示、以及哪个地方要修剪。

background-position

background-position指定背景图片的初始位置。

background-position指定的初始位置是相对于以background-position定义的背景位置图层来说的。（padding-box | border-box | content-box）

默认情况下，背景图片就是在padding-box的左上角落脚安家的。即默认值为：0% 0%
如下图：

可以使用background-position属性改变默认的位置。

在css2.1中，可以使用两个值来决定背景图片相对于元素的位置。

• 第一个值决定了水平位置
• 第二个值决定了垂直位置

其中，可以取值的形式有：

• 百分比 百分比
  
  • 初始默认值 0% 0% 表示图片的左上角和padding-box的左上角对齐。
  • 100% 100% 则表示图片的右下角和padding-box的右下角对齐。
  • 14% 84% 就表示图片水平方向上14%和垂直方向上84%的点，与padding-box区域水平方向14%垂直方向84%的点对齐。
    百分数值同时应用于图像和元素。与设置数值不同

• 长度 长度

  • 图片左上角距padding-box上边和左边的距离

  • 可以使用负值

    • 正值所产生的效果是把背景图片往右下方移动——元素背景区域内部
      
      

    • 负值产生的效果是吧背景图片往左上移动
      
      

• 关键字
  
  • top，left：0%
  • bottom，right：100%
  • center：50%

如果只有一个值，则这个值会默认设置水平方向，此时垂直方形默认为50%。

在css3中，则可以给此属性指定4个值：

p{
    background-position:left 10px top 15px;
}

• 前两个值代表水平轴
• 后两个值代表垂直轴

这意味着我们可以相对于上下左右任何一个角落定位，而不是之前的只能相对于左上角定位。

background-repeat

background-repeat 指定背景图片是否以平铺效果重复出现，以及重复的方式。

默认情况下，背景图片会沿着x轴，y轴重复。即默认值为repeat。

同样的，默认起始于padding-box的左上角。尽管背景图片平铺起始于padding-box左上角，但是其从各个方向朝外面平铺，会包括border区域。 即图片的重复会在border-box内。
当background-position指定为其他值时，重复模式会从background-position指定的位置开始向四周延伸。

在css2.1中，可以使用四个不同的关键字改变平铺的行为：

• repeat：图像会按需重复来覆盖整个背景图片所在的区域.。如果大小不合适的话最后一个图像会被裁剪。
• repeat-x：水平方向上重复
• repeat-y：垂直方向上重复
• no-repeat：图像不会被重复

而在css3中，可以用两个值代替一个值，其中第一个值代表水平轴，第二个值代表垂直轴。如果只使用一个值的话浏览器会自动解释成两个值：

• repeat：repeat repeat
• repeat-x：repeat no-repeat
• repeat-y：no-repeat repeat
• no-repeat： no-repeat no-repeat
  
  
  
  

同时，css3还提供了两个新值，space和round。但兼容性较差：
只有IE9，Opera 10, Opera 11 支持。

• space：可以简单理解为图片的两端对齐平铺，多出来的空间用空白代替。 background-position属性会被忽视，除非只有一个图像能被无裁剪地显示。

• round：也可以说是两端对齐的效果，但其多出来空间通过自身的拉伸或压缩来填充。

这两个新值让我们在布局背景图片的时候更灵活了。例如我们可以使用两个值来定义不同的水平和垂直行为：

div{
    background-repeat:space no-repeat;
}

background-attachment

如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的。
默认值为scroll。

有三种取值：

• fixed：此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
  此时，背景图像的位置由可视区大小确定，background-origin不起作用。
• local：此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
• scroll：此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

background-origin

background-origin 用来决定背景图片相对于哪个盒子定位。有三个属性值：

• content-box
• padding-box
• border-box
  
  
  

注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。

background-clip

background-clip属性是用来决定背景是否延伸到边框下面。
默认值为border-box。

有三个属性值：

• border-box：从border区域向外裁剪背景。
• padding-box：从padding区域向外裁剪背景。
• content-box：从content区域向外裁剪背景。

背景色不受background-origin的控制，因此用background-clip可以方便地控制背景色的延伸区域。

这个属性具体的用途可以有：

• 从dashed或dotted的边框下移出背景色或者背景图片
• 创作一种双边框的表现：一个是真正的边框，另一个实际上是padding，这可以通过使用content-box的值来实现。

background-size

background-size 设置背景图片大小。默认值为auto auto。

在CSS2.1中，我们是没有办法控制背景图片的大小的。然而，在CSS3中允许我们使用background-size属性来控制背景图片的大小。

首先，属性有几种取值形式：

• 长度：不可为负值
• 百分比：
  指定背景图片相对背景区宽高的百分比。背景区由background-origin设置，默认为padding-box。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不可为负值。
• auto：以背景图片的比例缩放背景图片
• 关键字：
  这两个值都按比例缩放背景图片：
  
  • cover：保证背景图片的宽和高都至少不小于容器对应的宽和高，能保证容器的背景区域被完整覆盖，但是图片可能会被截断。
  • contain：让背景图片尽可能地放大，但是会确保宽和高都不会超出容器，可能会导致容器的部分背景区域空白没有图片。

可以为background-size属性指定一个值或两个值：

• 若指定了两个值，则第一个值表示宽度，第二个值表示高度。
• 若只设置了一个值，则高度值会自动使用auto。

background属性的简写

background属性允许我们使用一条规则设置所有单独的背景属性

理解各项属性的初始值很有必要，因为不用每次都设置所有的值，其他未被设置的值则被初始化为默认值。

这里要注意，由于background是一个简写属性，因此其默认值会覆盖先前为给定元素指定的值：

h1{
    background:gray url(a.jpg) center repeat-x;
}

h1{
    background:silver;
}

第二条规则在background-image、background-position和background-repeat上的默认值会覆盖第一条规则中设定的值。

注意！在简写属性中 background-size.这个属性的定义必须在background-position之后，并使用/分割。

多背景(Multiple backgrounds)

在CSS2.1中，任何HTML元素只能添加一张背景图片，然而，在CSS3中，我们可以给任意元素添加N张背景图片。

在一个属性中为多张图片设置值，则每个值之间用逗号来分隔。

背景图片以层的形式显示 – 第一个在其他之上。列表中的第一个图片是离用户最近的，而下一个图片会被渲染到第一个之后，以此类推。

所有的元素只能定义一个背景颜色，background-color所在的层被赋予为最底层，称之为“终极层(final layer)”。background-color层在所有的background-image层之下。

另外，如果出于某些原因无法加载background-image，浏览器就会使用给定的背景色取代图像。因此使用背景图像的同时最好再指定一个背景色。

所有的这些背景属性都可以合并成单独的一行缩写。多背景图的缩写规则与单背景图是一致的，然后中间用逗号隔开。

p {
    background: 
        url (01.gif) no-repeat,    /*图片1*/
        url (02.gif) repeat left bottom,    /*图片2*/
        url (03.gif) repeat-y 10px 5px    /*图片3*/
}

background-color和multiple backgrounds

只有最底层，即所谓的“终极层”可以设置background-color，background-color只有设置在“终极层”上才能在让所有背景图显示。如果background-color值被添加到其他杂七杂八的层（不是“终极层”）上，那么整个规则将不会显示。

添加背景颜色比较安全的做法是使用独立的background-color声明，如下：

另外，渐变是一种代码生成的图片。这意味着可以在多背景中使用渐变。