<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
div {
width: 500px;
height: 500px;
border: 1px solid red;
/* 1.添加背景颜色 background-color:skyblue; */
/* 2.添加背景图片
如果图片大于容器，默认从容器左上角开始放图片；
如果图片小于容器，那么图片默认会平铺显示在容器中。*/
/* background-image: url("../images/1.jpg") */
/* 3.设置背景平铺
round：将图片进行缩放之后，再平铺
space：图片不会缩放平铺，只是会在图片之间产生相同的间距。*/
background-image: url(../images/thermostat_cold_on.png);
/* background-repeat: space; */
/* 4.设置在滚动容器的背景的行为：跟随滚动/固定
fixed:背景图片的位置固定不变
scroll：当容器滚动的适合，背景图片也跟随滚动。
local与scroll区别：前提是滚动当前容器的内容：
local：背景图片会跟随内容一起滚动
scroll：不会跟随内容一起滚动。
*/
background-attachment: scroll;
}
</style>
</head>
<body>
<div></div>
<span style="height: 800px; display: block;"></span>
</body>
</html>==============================
background-size属性：
css中此属性能够让程序员决定如何在指定的元素里展示，它通过改变背景尺寸的各种不同的属性值改变背景尺寸呈现的大小。建议不要将图放大，如果有需要，尽量让图缩小。
1. 语法：background-size:auto(原始大小)||number(数值)||percentage(百分比)
||cover(放大铺满)||contain(缩小铺满)
2. 参数说明：
a) auto:默认值，保持背景图片的原始高度和宽度；
b) number：具体的值，可以改变背景图片的大小；
c) percentage：此值为百分值，可以是0-100%的任意值。但只能应用在块元素上，
所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
d) cover：此值是将图片放大，以适合铺满整个容器。
效果与contain刚好相反，背景图片会按比例缩放，来自适应整个背景区域。
如果背景区域不足以包含所有的背景图片，图片内容会溢出。
1.图片大于容器：等比例缩小图片，填满整个背景区域，造成图片的某些区域不可见。
2.图片小于容器：将图片等比例放大，填满整个背景区，有可能造成某个方向上内容溢出。
e) contain: 按比例调整 图片大小，是图片宽高自适应整个元素的背景区域。
使图片全部包含在容器内。
1.图片大于容器：将图片缩小，有可能造成容器存在空白区域。
2.图片小于容器：将图片放大，有可能造成容器的空白区域。
background-size: 300px 500px; /*写上2个值*/
background-size: 300px; /*只写上1个值*/
background=repeat：no-repeat;
background-size: 50% 50%; /*参照父容器可放置内容区域的百分比*/
eg：广告图，很长，中间区域一直显示在屏幕中间。
<html>
<head>
<meta charset="utf-8">
<title>backgroundSize案例，让图片中间区域，一直显示在屏幕最中间</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
/* 始终显示图片中间的一块区域。 */
div {
width: 100%;
height: 400px;
background: url(../images/pic01.jpg);
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>==============================
background-origin/background-clip 的使用
裁剪魔术图片的某个区域作为返回键，显示返回键按钮，可点击区域，比显示的区域大。
<html>
<head>
<meta charset="utf-8">
<title>提升用户响应区域</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
/* 提升移动端，响应区域的大小 */
a {
width: 50px;
height: 50px;
display: block;
background-color: #ccc;
margin: 100px auto;
background-image: url(../images/thermostat_hot_on.png);
/* 设置背景偏移，参考bg-origin原点，这个原点默认在容器的左上角。 */
background-position: -20px 0px;
padding: 14px;
box-sizing: border-box;
/* 设置背景坐标的原点
border-box:从border的位置，开始填充背景，会与border重叠
padding-box:从padding的位置，开始填充背景，会与padding重叠。
content-box:从content的位置，开始填充背景，会与content重叠。*/
background-origin: content-box;
/* 设置内容的裁切：设置的是裁切，控制的是显示
border-box:其实是显示border及以内的内容。
padding-box:显示padding及以内的区域内容。
content-box: 显示content及以内的区域内容。*/
background-clip: content-box;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>