背景css设置

一、css属性定义背景效果

1. background-color : 设置背景颜色
   设置背景的颜色可以用3中写法，分别为：十六进制、RGB或者颜色名称。例如设置背景为白色可以这样写：

	/* 十六进制 */
	background-color: #ffffff;
	/* RGB */
	background-color: rgb(255,255,255);
	/* 颜色名称 */
	background-color: white;

2. background-image : 设置背景图片
   设置元素的背景图片后，默认情况下，背景图片会平铺重复直到覆盖元素实体。写法如下：

	background-image: url(../images/background1.png);

3. background-repeat : 设置背景是否重复
   默认情况下，背景图片是平铺重复的，可以通过设置background-repeat属性可以设置背景图片是否重复，往哪个方向重复。写法如下：

	/* 只在横向重复背景图片 */
    background-repeat: repeat-x;
	/* 只在纵向重复背景图片 */
	background-repeat: repeat-y;
	/* 不重复背景图片 */
	background-repeat: no-repeat;

4. background-attachment : 设置背景是否固定或随页面的其余部分移动
   默认情况下背景会随着页面的其余部分移动，可在很多情况下，我们的背景图片的大小是和屏幕的大小是相同的，我们希望背景的图片不会说随着屏幕滑动而出现空白的情况。这时候就需要设置background-attachment属性把背景固定了。写法如下：

	/*背景图片不会随着页面的滚动而滚动*/
	background-attachment : fixed;

5. background-position : 设置背景的位置
   很多情况下，背景图片的大小都会比屏幕的大小大，超出屏幕大小的部分会通过设置overflow:hidden属性来进行裁剪。默认情况下，左上角的点为初始点，为0%0%,当图片太大时，优先裁剪右边和下边超出的部分，通过修改background-position属性修改起始位置。设置方式有3种：第一种用center、top、right、bottom、left等值来设定，可以写2个值，第一个值设置水平位置，第二个值设置垂直位置，如果只设置了一个值，那另一个值默认center。第二种用百分比设置。第三种用固定的值设置，单位可以是px也可以是别的css单位。示例如下：

	/* 设置一个400*400px的图片的起始位置为上边的中点 */
	/* 方式一 */
	background-position: center top;
	/* 方式二 */
	background-position: 50% 0%;
	/* 方式三 */
	background-position: 200px 0px;

二、css3新增属性

1.background-size 指定背景图片的大小。指定的大小是相对父元素的宽度和高度大小。

	/* 第一种通过设置百分比的形式，第一个值为水平方向，第二个值为垂直方向，如果只填一个值，那第二个值默认为100% */
	background-size: 100% 100%;
	/* 第二种设置值为cover */
	background-size: cover;
	/* 第三种设置值为contain */
	background-size: contain;

设置不同值的区别为：
background-size：100%;总是X轴100%铺满整个容器，Y轴可能被裁剪会出现空白填不满部分，图片不变形。
background-size：100% 100%;图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
background-size：cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。
background-size：contain;图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。