css之background

文章目录

background

background属性用于指定一个元素的background效果。 background包括一个元素的内容+内边距(padding)+边框(border)，不包括外边距(margin) 主要的background效果有：

用于指定一个元素的背景颜色，颜色的设置有6中：

1.16进制，指定方法为：#RRGGBB ，比如：

#p1 {background-color: #ff0000;} / * red */

2.RGB，指定方法为：rgb(red, green, blue),比如：

#p1 {background-color: rgb(255,0,0);} / * red */

3.RGBA,IE9+才支持，指定方法为: rgba(red, green, blue, alpha),比如：

#p1 {background-color: rgba(255,0,0,0.3);} / * red with 0.3opacity */

4.HSL,IE9+才支持，指定方法为: hsl(hue, saturation, lightness),比如：

#p1 {background-color: rgba(255,0,0,0.3);} /* red with 0.3opacity */

5.HSLA,IE9+才支持，指定方法为：hsla(hue, saturation, lightness, alpha),比如：

#p1 {background-color: rgba(255,0,0,0.3);} / * red with 0.3opacity */

6.颜色名，比如：’red’,’blue’

#p1 {background-color: red;}

指定一个元素的背景图片,默认情况下图片是铺满整个元素的，即在垂直和水平方向上重复背景。

body {background-image:url('paper.gif');}

指定背景图片的重复方式,语法为：

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

repeat和initial 都是垂直和水平重复。 repeat-x —> 水平重复 repeat-y —> 垂直重复 no-repeat —> 不重复

指定背景图片在元素的开始位置，默认情况下从左上角开始。值的形式如下表:

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果只指定一个，另一个默认为”center”
x% y%	以百分比的形式指定位置，左上角是(0% 0%),右下角是(100% 100%),如果只指定x%，y%默认为50%
xpos ypos	xpos指定水平位置，ypos指定垂直位置，左上角的坐标为(0px 0px),xpos、ypos使用单位值，也可以使用其他CSS units可以跟其他指定位置的方式混合使用，如果只有xpos，ypos默认为50%
initial	默认值 Read about initial
inherit	从它的父元素继承Read about inherit

设置页面滚动的时候，背景图片是否跟着移动。有以下几种值:

IE8及更早版本的浏览器不支持这个属性。

这些background的属性可以简写到一个名称为background的属性中。比如：

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

这些属性是否缺了一个不重要，重要的是要保持这样的顺序：