background

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     

　　

转载于:https://www.cnblogs.com/lan1974/p/8257853.html