CSS背景

CSS背景属性的几个主要属性：

background-color：设置元素的背景颜色

background-image：设置元素的背景图片

background-position：设置背景图像的开始位置

background-repeat：设置是否以及如何重复背景图像

background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

background-size：规定背景图片的尺寸 （css3新增）

这些属性可以合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。 

背景色（background-color）

background-color: #FFF;

背景色通常由以下几种方式指定：

• 有效的颜色名称（颜色单词）--如：red、blue等
• 16进制值--如：#FFFFFF
  • 16进制缩写--如：#FFF
• RGB 值 - 比如 "rgb(255,0,)"
  • RGBA值--比如”255,255,255,0.5"

  背景图片（background-image）

书写格式为：background-image: url('图片地址 ');

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距，默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复。 当即设置了背景图片又设置了背景颜色时，背景图片会覆盖背景颜色

图片位置（background-position）

书写格式为：background-position: 2px 5px;

值	说明	注意
长度值（x y）	第一个值为水平位置，第二个值为垂直位置	如果只写一个参数的话，第二个默认为居中
百分比（x% y%）	第一个值水平方向的百分比，第二个值垂直方向的百分比，左上角（0%  0%）、右下角（100% 100%），如果仅写了一个值，另一个值将为50%	如果只写一个参数的话，第二个默认为居中
top	顶部显示，相当于垂直方向0	如果只写一个参数的话，第二个默认为居中
right	右边显示，相当于水平方向100%	如果只写一个参数的话，第二个默认为居中
left	左边显示，相当于水平方向0	如果只写一个参数的话，第二个默认为居中
bottom	底部显示，相当于垂直方向100%	如果只写一个参数的话，第二个默认为居中
center	居中显示，相当于水平方向的50%，垂直方向的50%	水平、垂直方向都居中

使用方位值

background-position: right bottom;

使用长度，可以为负（超出部分不会显示）

background-position: 20px 50px;

background-position: -20px -50px;

background-repeat(设置是否重复)

默认情况 重复

background-repeat: repeat;

不重复

background-repeat: no-repeat;

只有水平方向重复

background-repeat: repeat-x;

只有垂直方向重复

background-repeat: repeat-y;

background-attachment(控制背景图附着情况 )

默认情况,随着页面一起滚动

background-attachment: scroll;

不随页面一起滚动

background-attachment: fixed;

background-size(背景图尺寸)

可以通过长度、百分百和关键字（contain 和 cover）控制

contain：会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

cover：会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小

长度

background-size: 300px 300px;

百分比 相对于盒子

background-size: 50% 80%;

只设置一个值时，第二个值默认为自动

background-size: 50%;

关键字

等比例缩放，尽可能缩放背景图，但不会超过盒子

background-size: contain;

等比例缩放，尽可能缩放背景图，直到盒子占满，背景图超出部分不可见

background-size: cover;

属性简写

background: color url() repeat position attachment /size;

属性简写中的尺寸属性书写是要加上 英文中的斜线（ / ）才会生效