CSS背景（background）
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本篇文章就给大家介绍css怎样设置背景图片，需要的朋友可以参考和学习一下，希望对你有所帮助。
一、background概述
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| 属性 | 描述 |
| background-color: | 设置元素的背景颜色 |
| background-image: | 设置元素的背景图像 |
| background-repeat: | 控制背景图像是否重复 |
| background-position: | 控制背景图像在元素中的位置 |
| background-attachment: | 控制背景图像是否跟随窗口滚动 |
| background-size | 设置背景图像的尺寸 |
| background-origin | 设置 background-position 属性相对于什么位置来定位背景图像 |
| background-clip | 设置背景图像的显示区域 |
| background | 背景属性的缩写，可以在一个声明中设置所有的背景属性 |
css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。
二、属性
1. background-color
（1）定义和用法：background-color 属性设置元素的背景颜色
| 值 | 描述 |
| color_name | 使用具体颜色名称为元素设置背景颜色（例如 red） |
| hex_number | 使用十六进制码为元素设置背景颜色（例如 #ff0000） |
| rgb_number | 使用 rgb() 函数为元素设置背景颜色（例如 rgb(255,0,0)） |
| transparent | 默认值，设置背景颜色为透明，大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色，或者不希望用户对浏览器的设置（比如开启夜间模式、护眼模式）影响到您的设计，那么就可以使用 transparent 来将颜色设置为透明的 |
| inherit | 从父元素继承对背景颜色的设置 |
（2）元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
（3）transparent 值
尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。
使用 background-color 为元素设置背景颜色：
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: white;
background-color: blue;
margin: 20px; /*设置外边距为 20px*/
padding: 20px; /*设置内边距为 20px*/
border: 10px dotted yellow; /*设置一个宽 10px 的黄色虚线边框*/
}
</style>
</head>
<body>
<p id="bg">background-color 属性</p>
</body>
</html>展示结果如下：
通过运行结果可以看出 background-color 属性能够为元素设置一种纯色的背景，这种颜色会填充元素的内容、内边距以及边框区域（也可以理解为边框及以内的所有区域），对于元素边框以外的区域（外边距）则没有影响。
2. background-image设置背景图
background-image:url("imgs/main_bg.jpg"),如果属性在css文件中设置，而图片不在css文件夹中，那么路径前面加上返回上一层文件夹 …/
（1）background-image 属性为元素设置背景图像。
（2）元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
（3）默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
（4）url(‘URL’)：指向图像的路径。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
3. background-repeat背景图重复
默认情况下，背景图会铺满整个页面，背景图大小不够铺满整个页面时，背景图会在横坐标和纵坐标中进行重复；
| 属性 | 属性值 | 描述 |
| background-repeat: | repeat | 横、纵坐标重复（默认值） |
| no-repeat | 背景图像仅显示一次，不在任何方向上重复 | |
| repeat-x | 背景图像仅在水平方向上重复 | |
| repeat-y | 背景图像仅在垂直方向上重复 | |
| inherit | 从父元素继承 background-repeat 属性的设置 |
4. background-size设置背景图的尺寸
| 属性 | 属性值 | 描述 |
| background-size: | xpos ypos | 使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动） |
| x% y% | 使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动） | |
| cover | 保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示 | |
| contain | 保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域 |
5. background-position设置背景图位置
预设值： left、bottom、right、top、center（居中）
| 属性 | 属性值 | 描述 |
| background-position: | center | 背景图横、纵向居中 |
| center top | 横向居中，纵向靠上 | |
| center bottom | 横向居中，纵向靠下 | |
| left center | 横向靠左，纵向居中 |
注：也可以用数值或百分比如background-position：10px 10px 表示横、纵坐标离左边、上边边框的距离；
6. background-attachment设置为是否固定
| 属性 | 属性值 | 描述 |
| background-attachment: | fixed | 当页面的其余部分滚动时，背景图像固定不动 |
| scroll | 默认值，背景图像随着页面元素的滚动而移动 | |
| inherit | 从父元素继承 background-attachment 属性的设置 |
7. background-origin
background-origin 是 CSS3 中新增的属性。在使用 background-position 属性来设置背景图像的位置时，默认是以元素左上角的位置来计算的。您还可以使用 background-origin 属性来设置 background-position 属性相对哪个位置来定位背景图像，background-origin 属性的可选值如下：
| 值 | 描述 |
| padding-box | 相对于元素的内边距区域来定位背景图像 |
| border-box | 相对于元素的边框区域来定位背景图像 |
| content-box | 相对于元素的内容区域来定位背景图像 |
8. background-clip
background-clip 是 CSS3 中新增的属性，通过它可以设置背景图像的显示区域。background-clip 属性的可选值如下：
| 值 | 说明 |
| border-box | 默认值，在元素边框及以内的区域显示背景图像 |
| padding-box | 在元素内边距及以内的区域显示背景图像 |
| content-box | 在元素内容区域显示背景图像 |
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
9. background
background 是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序，但推荐使用如下顺序进行设置：
background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip
注意：背景图和img属性的区别：
（1）img元素属于HTML的概念，背景图属于css的概念
（2）当图片属于网页内容时，必须使用img元素
（3）当图片仅用于美化页面时，必须使用背景图
本文固定URL：https://www.dotcpp.com/course/1132