含义:
背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图。
可以设置背景颜色,或背景图,或同时设置。其中背景图有多项参数可设置。
主要的背景属性设置有:
设置背景颜色:
background-color:yellow;
设置背景图:
background-image:url(图片路径); //注意,图片路径是相对于当前网页或css文件(对外部样式来说)
设置背景图的位置(有背景图的前提下有效)
background-position:水平位置 [,垂直位置];
说明:
①,如果不设置该属性,默认值为“0,0”,即在盒子的左上角。
②,可以设置1个值或2个值;设置1个值的时候,第二个默认为center(居中)。
③,水平位置:可以设置为长度值,或百分比,或以下固定值:left/center/right。
④,垂直位置:可以设置为长度值,或百分比,或以下固定值:/top/center/bottom
设置背景图是否重复(有背景图的前提下有效):
background-repeat:属性值1 [,属性值2]; //有以下几个属性值可用:
repeat: 重复,默认值;
no-repeat: 不重复;
repeat-x: 只在x方向重复;
repeat-y: 只在y方向重复;
background:yellow; //只设置背景颜色; background:yellow url(./images/bg.jpg) no-repeat; background:yellow url(./images/bg.jpg) repeat-y lelft top; background:yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px;
可以同时设置上述几个有关背景的属性,相互之间用空格隔开,比如:
background:yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px; background:yellow; // 只设置背景颜色; background:yellow url(./images/bg.jpg) no-repeat; background:yellow url(./images/bg.jpg) repeat-y lelft top; background:yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px;
background:yellow; //只设置背景颜色; background:yellow url(./images/bg.jpg) no-repeat; background:yellow url(./images/bg.jpg) repeat-y lelft top; background:yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px;