CSS背景
CSS 背景属性用于定义元素的背景效果。
CSS background-color
background-color属性指定元素的背景色。
页面的背景色设置如下：
body {
background-color: lightblue;
}通过CSS，颜色通常由以下方式指定：
- 有效的颜色名称-比如“red"
- 十六进制值-比如”#ff0000"
- RGB值-比如“rgb（255,0,0)"
其他元素
您可以为任何HTML元素设置背景颜色：
举例：<h1>、<p> 和 <div> 元素将拥有不同的背景色：
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}不透明度/透明度
opacity属性指定元素的不透明度/透明度。 取值范围0.0 -1.0。 值越低，越透明：
div {
background-color: green;
opacity: 0.3;
}
注意：使用opactiy属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
使用RGBA的透明度
如果您不希望对子元素应用不透明度，请使用RGBA颜色值。下面的例子背景色而不是文本的不透明度：
div {
background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}
CSS背景图像
background-image 属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。
例如：
页面的背景图像可以像这里设置：
body {
background-image: url("paper.gif");
}注意：使用背景图象时，请使用不会干扰文本的图像。还可以为特定元素设置背景元素，例如<p>元素：
p {
background-image: url("paper.gif");
}CSS背景重复
CSS background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。某些图像只适合水平或垂直方向上重复。
body {
background-image: url("gradient_bg.png");
}如果上面的图像仅在水平方向上重复（background-repeat: repeat-x;),则背景看起来会更好：
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}提示：如需垂直重复图像，请设置 background-repeat: repeat-y。
CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像：
背景图像仅显示一次：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}CSS background-position
background-position 属性用于指定背景图像的位置
举例：
把背景图片放在右上角：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}CSS 背景附着
CSS background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：
指定应该固定背景图像：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}指定背景图像应随页面的其余部分一起滚动：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}CSS背景简写
如需缩短代码，也可以在一个属性中指定所有背景属性，它被称为简写属性。
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}使用简写属性在一条声明中设置背景属性：
body {
background: #ffffff url("tree.png") no-repeat right top;
}在使用简写属性时，属性值的顺序为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。
所有 CSS 背景属性
| 属性 | 描述 |
|---|---|
| background | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
补充知识
background-clip
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
h1 {
background: url(./assets/img/161105-17318310655d07.jpg);
background-clip: text;
color:transparent;
font-size: 200px;
background-origin: left;
}如果没有设置(background-image）或背景颜色（background-color），那么这个属性只有在边框（ border ）被设置为非固实（soild）、透明或半透明时才能看到视觉效果，否则，本属性产生的样式变化会被边框覆盖。
background-origin
background-origin规定了背景图片background-image属性的原点位置的背景相对区域。注意：当使用background-attachment为 fixed 时，该属性将被忽略不起作用。
/* 关键字值 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;background-size
background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
/* 关键字 */
background-size: cover
background-size: contain注意：没有被背景图片覆盖的背景区域仍然会显用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。
cover：
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
contain:
缩放背景图片以完全装入背景区，可能背景区部分空白。
