CSS3 背景图片

1.背景图大小(background-size)

• 这个属性设置单张背景图的大小，默认是原图的大小
• 当同时指定宽高时，会造成图片失真，如果要保持宽高比，可以使用 auto 字段让宽或者高自适应

值类型	示例	说明
像素	50px 50px	-
百分比	50% 50%	这个比例是基本容器本身，而不是原图大小
关键字	contain	背景图自适应容器大小(显示一张完整的图片)
关键字	cover	背景图自适应容器大小（图片完全将容器填满）
关键字	auto	自适应，保持宽度宽高比

2.背景重复(background-repeat)

• 如果背景图小于容器，那么容器在容纳一张背景图之后，还会有剩余的空间，默认情况下会将图片重复直至铺满整个容器
• 也可以使用这个属性进行其他控制，他有几个值：

值	说明
repeat	（默认）将图片重复直至铺满整个容器，包含水平和垂直方向
repeat-x	同 repeat，但只在水平方向重复
repeat-y	同 repeat，但只在垂直方向重复
no-repeat	不重复，只显示一张图片
round	重复，且保证每张图片的完整型 ，剩下的不够一张图片的空间会被均分到其他图片中
space	重复，且保证每张图片的完整型，剩下的不够一张图片的空间会均分成间隔

• 如果背景图大小设定成了 cover/contain 则此background-repeat属性失效

3.背景图显示区域(background-clip)

• 默认情况下，元素的border，padding，centent区域都是可以显示背景图的，css3添加了这个属性，可以设定背景图的显示区域，这个属性有3个值：

值	说明
border-box	（默认）容器border，padding，centent区域都可以显示背景图
padding-box	只在padding + content区域的显示背景图
content-box	只在content区域显示背景图

• 注意：这个属性对于background-color也是有效的！

4.绘制原点(background-origin)

• 这个属性用来设置背景图片的绘制原点，它有3个值：

值	说明
border-box	从边框开始绘制
padding-box	（默认）从padding开始绘制
content-box	从content开始绘制

5.背景图片位置(background-position)

• 默认背景图的位置是左上角(background-origin)，这个属性允许用户设置水平方向和垂直方向的偏移量，从而控制背景图片的位置

值类型	示例	说明
像素	10px 20px	代表向右偏移10px，向下偏移20px
百分比	50% 50%	百分比是基于空白的区域的大小 ，而不是整个容器的大小，设50%表示居中
关键字	left / right / center / top / bottom	left top代表左上角

6.背景固定(background-attachment)

• 这个属性适用于容器出现滚动条的时候，它控制当用户拖动滚动条时，背景图如何展示

值	说明
scroll	(默认) 追随系统的滚动条（body的滚动条）的滚动而滚动 ，用于body元素
fixed	背景图像固定不动，用于body元素
local	追随当前元素的滚动条的滚动而滚动，常用于普通div元素

7.简写

• background可以将多个背景属性写在一起，但是不包含 background-size ,个人的测试表明，属性的顺序除特殊情况外是可以随意

background: no-repeat url(./imgs/e-plus.png);
//等价于
background: url(./imgs/e-plus.png) no-repeat;

• 注意点：background-clip和background-origin，他们值是相似的(border-box,padding-box,content-box)，如果只写了一个类似的值，则视为background-origin和background-clip都是这个值，如果写了2个值，则第一个值对应background-origin，第二个值对应background-clip