网页制作之CSS背景属性

1、 css背景属性列表

background

简写属性，作用是将背景属性设置在一个公告中

background-color

设置元素的背景颜色

background-image

把图像设置为背景

background-position

设置背景图像的起始位置

background-repeat

设置背景图像能否及如何重复

background-attachment

背景图像能否固定或者者随着页面的其他部分滚动

2.background-position详解

方法一：使用少量关键字，如top bottom left right center,通常这些关键字会成对出现。其作用如其名称所标明，例如：top right将背景图片定位于元素的右上角。根据规范，位置关键字可以按任何顺序出现，只需保证不超过两个关键字——一个对应水平方向，另一个对应垂直方向。假如只出现一个关键字，则认为另一个关键字是center。

方法二：使用百分数值，百分数值的体现方式更为复杂。假设希望用百分数值将图像在其元素中，这很容易background-position:50% 50%等价于background-position:center,其中心与元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说图像的中心点与元素的中心点对齐。

注意：假如使用值，第一个值代表水平方向，第二个值代表垂直方向。

思考：background-position:0% 0%与background-position:100% 100%的显示效果为什么？

Background-position:66% 33%

注：background-position的默认值为0% 0%，在功能上相当于top left,这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺。并且百分比与关键字相同，都是元素某个点与背景图片某个点的对齐。

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