CSS背景（20160822－0022）

盒模型的尺寸可以通过两种方式实现可见性，一种是边框，另一种就是背景。

一、设置背景

CSS 背景设置的样式表：

4、background-position

8、background-clip

解释：背景的简写。完整简写顺序如下：[background-color] [background-image] [background-repeat] [background-attachment] ([background-position] / [background-size]) [background-origin] [background-clip]

二、具体代码

@charset "utf-8";

*{
	padding: 0px;
	margin: 0px; 
}
/******************* background-color *******************/
body{
	/*background-color: gray;*/
}
/* 设置元素的背景颜色，属性是颜色值 */
p{
	/*background-color: blue;*/
}

/* 设置背景颜色透明 */
p{
	/*background-color: transparent;*/
}

/******************* background-image *******************/
/* 设置背景图片，其中 url 是图片的路径，如果图片不足以覆盖，则复制扩展 */
body{
	/*background-image: url(../img/default_img.png);*/
}
/* 取消背景图片的设置，这个一般洪灾用在多个 p 批量设置了背景，而其中某一个不需要背景，可以单独设置 none 值取消背景 */
p{
	/*background-image: none;*/
}

/******************* background-repate *******************/
/* 水平方向平铺图像 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: repeat-x;*/
}
/* 垂直方向平铺图像 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: repeat-y;*/
}
/* 水平和垂直方向平铺图像，默认 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: repeat;*/
}
/* 禁止平铺 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;*/
}

/******************* background-position *******************/
/* 将背景图片至于页面上方 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: top;*/
}
/* 将背景图片至于页面下方，此时你会发现不管用，因为此时 body 没有设置高度，需要设置 height 属性 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: bottom;*/
}
/* 将背景图片至于右上角 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: top right;*/
}
/* 第一个表示左边，第二个表示上边。可以使用长度值或者百分比 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: 30px 80px;*/
}

/******************* background-size *******************/
/* 等比例缩放图像，使图像至少覆盖容器，但有可能超出容器。使用 cover 相当于 100%，全屏铺开一张大图，这个值很使用。在等比缩小的过程中，可能会有背景超出。 */
p{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-size: cover;*/
}

/* 等比例缩放图像，使其宽度、高度中较大者与容器横向或横向重合。使用 contain 表示，尽可能的让图片完整的现实在元素内。 */
p{
	/*width: 600px;
	height: 500px;
	border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-size: contain;*/
}
/* 长度值用法，分别表示长和高 */
p{
	/*width: 600px;
	height: 500px;
	border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-size: 300px 100px;*/
}

/******************* background-size *******************/
/* scroll，默认值，背景固定在元素上，不随着内容一起滚动 */
body{
	/*border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: repeat;
	background-attachment: scroll;*/
}
/* fixed，背景固定在视窗上，内容滚动时背景不动。fixed 属性会导致背景产生水印效果，拖动滚动条而背景不动。 */
body{
	/*border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: repeat;
	background-attachment: fixed;*/
}
/******************* background-origin *******************/
/* 设置背景的起始位置，相对于边框来定位 */
p{
	/*margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-origin: border-box;*/
}
/* 设置背景的起始位置，相对于内边距来定位 */
p{
	/*margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-origin: padding-box;*/
}
/* 设置背景的起始位置，相对于内容框来定位 */
p{
	/*margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-origin: content-box;*/
}
/******************* background-clip *******************/
/* 在内边距盒子内部裁剪背景 */
p{
	/*margin: 20px;
	padding: 30px;
	width: 100px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-clip: padding-box;*/
}
/* 背景被裁减到内容框 */
p{
	/*margin: 20px;
	padding: 30px;
	width: 100px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-clip: content-box;*/
}
/* 背景被裁减到边框盒 */
p{
	/*margin: 20px;
	padding: 30px;
	width: 100px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-clip: border-box;*/
}
/******************* background，简写 *******************/
/* [background-color]    [background-image]    [background-repeat]    [background-attachment]    ([background-position] / [background-size])    [background-origin]    [background-clip] */
p{
/*	margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background: silver url(../img/default_img.png) no-repeat scroll left top/100% border-box content-box;
*/}