文档介绍：CSS3背景属性教学难点透析
 
 
黄志刚
[摘           要]  背景属性一直是网页设计类课程需讲授的重点内容，在引入CSS3后，它的某些特征更是难以理解，成为教学中的难点。从元素的盒模型出发，引出背景png）”就是最底层图像层，设置了颜色“#999”。在其他图像层设置的颜色无效。
四、背景重复的双值语法
在设置背景图像的重复时，通常使用单值语法，CSS3引入双值语法，语义更清晰，实际上单值语法是双值语法的简写。在双值语法中，第一个值表示水平重复行为，第二个值表示垂直重复行为。单值语法与双值语法的对應关系，见下表。
五、背景图像的滚动模式
使用background-attachment属性设置背景图像的滚动模式时，基于浏览器窗口的主视窗和基于元素的局部视窗（如果元素具有滚动机制），会有不同的滚动效果。
如果background-attachment属性的取值为“fixed”，则背景图像相对于两个视窗都是固定的，可以把背景图像想象为附着在可视区域。在主视窗中，即使元素滚动，背景图像不会动;在局部视窗中，内容滚动，背景图像也不会动。
如果background-attachment属性的取值为“scroll”，则背景图像相对于元素本身固定，可以把背景图像想象为附着在元素边框上。在主视窗中，背景图像随元素滚动;在局部视窗中，即使内容滚动，背景图像保持不动。
如果background-attachment属性的取值为“local”，则背景图像相对于元素内容固定，可以把背景图像想象为附着在元素内容上。在主视窗中，背景图像随元素滚动;在局部视窗中，背景图像随内容滚动。
六、背景图像的定位
背景图像的定位是指设置背景图像从背景的哪个区域以及这个区域的哪个位置开始铺设。
（一）背景图像铺设的开始区域
默认情况下，背景图像在背景层的内边距盒中开始重复铺设，直到铺满整个背景。可以通过background-origin属性改变背景图像在背景层平铺的开始区域（简称定位区域）有三种，它们是content-box（内容盒）、padding-box（内边距盒）或border-box（边框盒）。注意，background-origin属性设置的不是平铺区域的大小。
（二）背景图像铺设的开始位置
确定了背景图像铺设的开始区域后，就要确定它从这个区域的哪个位置开始铺设。默认的开始位置是定位区域的左上角，可以通过设置background-position属性的属性值来改变背景图像平铺的开始位置。其属性值由最少1个最多4个空格分隔的值构成，用来表示背景图像在定位区域的水平位置和垂直位置。值的类型可以是百分数值、长度值和关键字值，百分数和长度值可以为正数、零或负数。关键字值有top、right、bottom、left和center，分别表示定位区域的顶部边缘、右边缘、下部边缘、左边缘和两条对边的中线位。

如果属性值是单值，则第二个值默认为“center”，实际上也是“双值”。
CSS为双值定义了一个特定的二维坐标系。它的原点在定位区域的左上角，水平向右是X轴的正方向，垂直向下是Y轴的正方向。在双值中，第一个值表示水平方向的位置（也常表述为相对定位区域左边缘的偏移），第二个值表示垂直方向的位置（也常表述为相对定位区域顶部边缘的偏移）。如果位置值是长度值，则表示固定长度的偏移量;如果位置值是百分数，如X%，则表示相对偏移量，按照图像的X%处的点（以图像的左上角为原点）与定位区域的X%处的点（以定位区域的左上角为原点）对齐的规则进行定位。如果在双值中出现了关键字值，则left和right分别是水平位置的0%和100%，top和bottom是垂直位置的0%和100%。
如“background-position：10% 20px”表示在水平方向按对齐规则定位，即背景图像10%处的点与定位区域10%处的点对齐;在垂直方向上，按固定长度定
位，即背景图像的顶部边缘相对于定位区域顶部边缘的偏移是20px的固定长度。

如果是三值，则缺失的偏移值默认为零，实际上也是“四值”。四值语法是指在一个关键字值（不含center）后指定一个百分数和长度值，关键字指定偏移相对的方位。如“background-position： bottom 10px right 20px”表示背景图像的底部边缘相对于定位区域底部边缘的偏移是10px的固定长度，背景图像的右边缘相对定位区域的右边缘的偏移是20px的固定长度。
要注意的是，用四值定位时，正值是表示从定位区域边缘向内部的偏移，负值是从定位区域边缘向外部的偏移。
不难看出，双值定位是四值定位的简写，如“backgro