03.背景

03.背景

背景色

• 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
• 背景色为蓝色 背景色为红色

背景图像

• 要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

属性

• 背景色
• background-color
• 背景图像
• background-image
• 背景重复
• background-repeat
• 背景定位
• background-position
• 关键词
• 位置
• center
• center center
• top
• top center
• center top
• bottom
• bottom center
• center bottom
• right
• right center
• center right
• left
• left center
• center left
• 百分数值

body {  
 background-image:url('/i/eg_bg_03.gif');
 background-repeat:no-repeat;
 background-position:50% 50%;
 }

• 这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

• 长度值
• 长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
• 比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body {
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-position:50px 100px; 
}

• 背景关联
• 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
• 您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
• background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

body  {
 background-image:url(/i/eg_bg_02.gif);
 background-repeat:no-repeat; 
 background-attachment:fixed 
}