元素的背景：在元素内容、内边距和边界下层的区域。
1. 改变背景所占区
在新的浏览器中，你可以使用 background-clip属性改变背景所占用的区域
background-clip: border-box 背景延伸到边框外沿（但是在边框之下）。
background-clip: padding-box 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box 背景裁剪到内容区 (content-box) 外沿。
background-clip: inherit 背景被裁剪为文字的前景色(只有chrome支持)。
2. 常用背景属性
background-color: 为背景设置一个纯色。
background-image: 指定在元素的背景中出现的背景图像。这可以是静态文件，也可以是生成的渐变。
background-repeat: 指定背景是否应该被重复(平铺)。
background-position:指定背景应该出现在元素背景中的位置。
background-attachment: 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?
background: 在一行中指定以上五个属性的缩写。
background-size: 允许动态调整背景图像的大小。
2.1 background-color 背景颜色
注意：大多数元素的默认背景颜色不是white (白色) 而是transparent（透明），另外，设置背景颜色作为后备也是很重要的。
语法：background-color: 颜色名|十六进制色|RGB 颜色|RGBA 颜色|HSL 颜色HSLA 颜色|预定义/跨浏览器颜色名；
举例：
颜色名 background-color:white;
十六进制颜色 background-color:#0000ff;
RGB 颜色 background-color:rgb(255,0,0);
RGBA 颜色 background-color:rgba(255,0,0,0.5);
HSL 颜色 background-color:hsl(120,65%,75%);
HSLA 颜色 background-color:hsla(120,65%,75%,0.3);
2.2 background-image 背景图像
background-image通常配合 background-repeat 使用
举例：
background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png); 引入图片
background-image: linear-gradient(to bottom, orange, yellow); 颜色渐变
注意：由于背景图像是使用CSS设置的，并且出现在内容的背景中，它们将会在屏幕阅读器之类的辅助技术中不可见。它们不是内容图片，只是为了装饰，如果你想在你的页面上包含一个图片，这是内容的一部分，那么你应该用<img>元素来做。
2.3 background-repeat 背景重复
background-repeat: no-repeat: 图像将不会重复:它只会显示一次。
background-repeat: repeat-x: 图像将在整个背景中水平地重复。
background-repeat: repeat-y: 图像会在背景下垂直地重复。
2.4 background-position 背景位置
该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形，x坐标从左到右，y坐标从上到下。
该属性可以接受许多不同的值类型(x和y的位置上可以用不同值类型)，最常用的是：
background-position: 200px 25px px 绝对值
background-position: 20rem 2.5rem rem 相对值
background-position: 90% 25% 百分比
background-position: right center. 关键字 （left，center，right和 top，center，bottom）
2.5 background-attachment背景附着
background-attachment:scroll|fixed|local;
scroll: 这将把背景修改为页面视图，因此它将在页面滚动时滚动。
fixed: 不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。
local:当滚动元素时，背景会随之滚动。
2.6 background 背景简写
background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size,background-attachment。
举例：
body {
background:
url(sweettexture.jpg) /* image */
top center / 200px 200px /* position / size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
red; /* color */
}
2.7 多个背景
将多个背景连接到单个元素。
举例：
简写形式
div {
background: url(image.png) no-repeat 99% center,
url(background-tile.png),
linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
}
单属性形式
background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;
2.8 背景尺寸
动态地改变背景图像的大小。
举例：
background-image: url(myimage.png);
background-size: 16px 16px; /* 改变x和y的px值可进行缩放方法和拉伸,另外，尺寸可以是其他任意单位rem、百分比、关键字*/
background-size: contain; /*特殊值，不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/
background-size: contain; /* 特殊值，指定背景图可以被调整到任意大小，以使背景图完全覆盖背景区域。*/
