css 背景颜色 background属性

背景颜色 background

含义：

背景是指在盒子结构中，衬托在边框线范围以内的背景颜色或背景图。

可以设置背景颜色，或背景图，或同时设置。其中背景图有多项参数可设置。

主要的背景属性设置有：

1. 设置背景颜色：

background-color：yellow;

2. 设置背景图：

background-image：url(图片路径); //注意，图片路径是相对于当前网页或css文件(对外部样式来说)

3. 设置背景图的位置（有背景图的前提下有效）

background-position：水平位置 [，垂直位置]；

说明：

①，如果不设置该属性，默认值为“0,0”，即在盒子的左上角。

②，可以设置1个值或2个值；设置1个值的时候，第二个默认为center（居中）。

③，水平位置：可以设置为长度值，或百分比，或以下固定值：left/center/right。

④，垂直位置：可以设置为长度值，或百分比，或以下固定值：/top/center/bottom

4. 设置背景图是否重复（有背景图的前提下有效）：

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；
​

5. 背景综合属性background：

可以同时设置上述几个有关背景的属性，相互之间用空格隔开，比如：

​
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；
​