CSS中的背景部分编程学习教程

在CSS里面，每个元素盒子都可以想象成由两个图层组成。

前景层：内容（如文本或图片）和边框。

背景层：用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（使用 background-image 属性），背景图片叠加在背景颜色之上。

    在 CSS3 被浏览器实现之前，只能在背景颜色上添加一张图片。而现在，我们可以为背景图层添加多张图片（以及 CSS3 渐变）。

CSS背景属性：

    background-color
    background-image
    background-repeat
    background-position
    background-size
    background-attachment
    background（简写属性）
    background-clip、background-origin、background-break（目前尚未得到广泛支持）

背景颜色

格式：background-color: 颜色值;
示例：background-color: #caebff;

背景图片

格式：background-image:url(图片路径/图片文件名);
示例：background-image:url(images/blue_circle.png);

    默认情况下背景图片会 以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域。

背景重复

格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
说明：

    repeat 默认值，水平和垂直方向都重复，直至填满元素的背景区域为止。
    repeat-x 水平方向重复。
    repeat-y 垂直方向重复。
    no-repeat 任何方向上都不重复（只让背景图片显示一次）。

背景位置

    用于控制背景位置的 background-position 属性，是所有背景属性中最复杂的。

该属性有5个关键字值，分别是 top、left、bottom、right 和 center，这些关键字中的任意两个组合起来都可以作为该属性的值。

background-position 属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。默认情况下，background-position的原点位于左上角。

    第一种情况，使用关键字来设定位置。background-position属性的默认值 top、left 控制着水平和垂直方向重复的起点。如修改 起点位置：p#center {background-position:center center;}（简化写法：background-position:center，设定一个关键值，则另一个也会取相同的值。），背景图片就会以段落的中心点为起点。

    第二种情况，使用百分比来设定位置。
    示例：background-position:50% 50%;，再把 background-repeat 设定为 no-repeat，就能实现了图片在背景区域内居中的效果。第一个值表示水平位置，第二个值表示垂直位置。要是只设定一个值，则将其用来设定水平位置，而垂直位置会被设为 center。