1、background-color
(1)、设置元素的背景色,所有的元素都可以设置背景色,包括 em a 之类的标签
(2)、默认值:transparent,意思就是透明。这样才可以看到祖先元素的背景
(3)、可能的值:颜色名字/十六进制的颜色/rgb代码颜色
(4)、任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
2、background-image
(1)、默认值:none
(2)、语法:url("相对路径")
(3)、任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
(4)、所有的元素都可以设置背景
3、background-repeat
(1)、属性值 repeat 导致图像在水平和垂直方向上都进行平铺,这个属性就是设置怎么平铺
(2)、值: repeat-y(垂直方向平铺)
repest-x(水平方向上平铺)
no-repeat 水平和垂直方向上都不平铺
4、background-attachment
(1)、设置背景图像是否固定或者随着页面的其余部分滚动
(2)、值: scroll(默认值,页面会随着其余部分的滚动而滚动)
fixed 当页面的其余部分滚动时,背景图像不会移动
inherit(可继承性,但是IE8及以下浏览器都不支持)
5、background-position
(1)、可以利用这个属性改变图片在背景中的位置(把图片放在一张大图上,通过这个属性可以减少图片的加载,优化性能)
(2)、这个的先决条件就是要有一个 background-image
(3)、语法:background-position:关键字/百分数值/长度值
(4)、所有的值都是相对于容器元素的左上角的
6、background-size(CSS3新增的属性)
(1)、Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
(2)、值: auto(默认值,图片有多大就显示多大)
contain(把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域)
cover(把背景图像扩展至足够大,以使背景图像完全覆盖背景区域)
100px 200px(把宽高写死,如果只写一个第二个值为默认)
10% 10%(以包容元素的百分比来设置背景图像的宽度和高度,如果只有一个第二个auto)
7、background-origin(CSS3新增属性)
(1)、规定 background-position 属性相对于什么位置来定位。
(2)、值:padding-box 背景图像相对于内边距在定位,是默认值
border-box 背景图像相对于边框来定位。
content-box 背景图像相对于内容框来定位。
8、background-clip (CSS3新增属性)
(1)、规定背景的绘制区域,也就是规定在哪些部位显示背景
(2)、值:padding-box
border-box 默认值
content-box