CSS 背景(background)

一、概括

属性	含义
background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置	背景的合写（复合属性）

二、详细了解

1. 背景图片(image)

 background-image : none | url (url) 

none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像
属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

2. 背景平铺（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

3. 背景位置(position)

background-position : length || length
background-position : position || position 

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。
position : 　top | center | bottom | left | center | right
设置或检索对象的背景图像位置。必须先指定background-position属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：

• position 后面是x坐标和y坐标。 可以使用方位名词或者精确单位。
• 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top;
  则 15px 一定是 x坐标 top是 y坐标。
• 实际工作用的最多的，就是背景图片居中对齐了。

4. 背景附着

 background-attachment : scroll | fixed 

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

5. 背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

6. 背景透明(CSS3)

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

7. 背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

• 如果背景图片尺寸大于盒子，则背景图片不进行方法，正常显示，超出部分被隐藏。
• 如果背景图片尺寸小于盒子，则背景图片进行等比例放大（图片不会出现变形），直至完全覆盖所属元素区域，超出部分被隐藏。
  优点是背景图片全部覆盖所属元素区域；缺点是超出的部分会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

8. 多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。

• 一个元素可以设置多重背景图像。
• 每组属性间使用逗号分隔。
• 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
• 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;