CSS 基础：设置背景的 5 个属性及简写 background 注意点
CSS 中的background背景属性是前端开发中常用的一个属性，它用于控制元素的背景样式，包括背景颜色、背景图片、背景位置等。
本文将详细探讨 CSS 中的background属性，包括 5 个子属性的用法、作用以及实际应用案例，来让我们一起看看吧。
5 个子属性
一、 background-color：用于设置元素的背景颜色。可以使用十六进制值、RGB 值等来指定颜色。例如：
body {
background-color: #00ff00; /* 使用十六进制值 */
/* background-color: rgb(255, 0, 0); 使用RGB值 */
/*background-color: rgba(255, 0, 0, 0.5); 使用带不透明度的RGB值 */
}
关于颜色的几种写法，可以看这篇文章。html基础：颜色的 5 种表示方法（最全！）
当然，这个背景颜色不止可以作用在 body 标签上，也可以为任何 HTML 元素设置背景颜色，比如 div,p,h1,ul,li,input 等，都可以的。
二、 background-image：用于设置元素的背景图片。它的取值形式主要包括以下 4 种：
- 图片路径：可以直接指定图片的路径，例如 url('image.jpg')。
- 线性渐变（Linear Gradient）：使用 linear-gradient() 函数来定义线性渐变背景。
- 径向渐变（Radial Gradient）：使用 radial-gradient() 函数来定义径向渐变背景。
- 其他图像类型（Other Image Types）：还可以使用其他图像类型，如SVG（Scalable Vector Graphics）图像等。
咱们今天先说最基础的第 1 种，后面的随着深入学习再说。第 1 种是图片路径，是通过url()可以指定图片的路径，可以是相对路径或绝对路径。例如：
body {
background-image: url(./img/bg1.jpg);
}
页面所用图片 bg1.jpg 图片如下：
当然，背景图像不止可以作用在 body 标签上，也可以为任何 HTML 元素设置背景颜色，比如 div,p,h1,ul,li,input 等，都可以。
三、 background-repeat：用于控制背景图片的重复方式。常用的取值包括：
| 属性值 | 说明 |
|---|---|
| repeat | 默认值，背景图片在水平和垂直方向上平铺重复显示。 |
| repeat-x | 背景图片在水平方向上平铺重复显示。 |
| repeat-y | 背景图片在垂直方向上平铺重复显示。 |
| no-repeat | 背景图片不重复，只显示一次。 |
例如，默认情况下，背景图片在水平和垂直方向上重复显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url(./img/bg2.png);
}
</style>
</head>
<body>
<h1>hello,world!</h1>
<h2>这背景，有点奇怪......</h2>
</body>
</html>
页面所用图片 bg2.png 图片如下：
效果如下：
那其实是不是这个照片往一个水平方向比较好啊，所以，就可以让重复方向变为 repeat-x, 那元素的背景图片就会在水平方向上重复显示了。
<style>
body {
background-image: url(./img/bg2.png);
background-repeat: repeat-x;
}
</style>
效果如下：
其他属性你可以自行试试。
四、 background-position：用于控制背景图片的位置。它的取值有三种类型：
- 百分比值：指定背景图片位置相对于包含块的百分比。例如，background-position: 50% 50%; 表示背景图片在水平和垂直方向上都居中显示。
- 像素值：指定背景图片位置相对于包含块的像素值。例如，background-position: 100px 50px; 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。
- 文字类取值。常用的取值包括：
| 属性值 | 说明 |
|---|---|
| left top | 背景图片在左上角显示。 |
| left center | 背景图片在左侧水平居中显示。 |
| left bottom | 背景图片在左下角显示。 |
| center top | 背景图片在顶部垂直居中显示。 |
| center center | 背景图片在水平和垂直方向上都居中显示。 |
| center bottom | 背景图片在底部垂直居中显示。 |
| right top | 背景图片在右上角显示。 |
| right center | 背景图片在右侧水平居中显示。 |
| right bottom | 背景图片在右下角显示。 |
例如，将背景图片位置设置在元素的右上角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
body {
background-image: url(./img/bg3.png);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>hello,world!像素值：指定背景图片位置相对于包含块的像素值。例如，`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。</h1>
...(把h1和内容复制16行，太长了，这里不写了)
<h1>hello,world!像素值：指定背景图片位置相对于包含块的像素值。例如，`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。</h1>
<h1>hello,world!像素值：指定背景图片位置相对于包含块的像素值。例如，`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。</h1>
</body>
</html>
页面所用图片 bg3.png 图片如下：
效果如图所示：
这样设置后，背景图片就会在右上角显示。但是呢，还有一个问题，滚动页面的时候，会发现，图片跟着走了，如图。
能不能滚动的时候，让背景图还固定到头部右上角不动呢？能，这就用到下一个属性了。
五、background-attachment ：用于设置背景图片的滚动方式，控制背景图片是否随页面滚动而滚动。
取值有三种：
当然可以，请看下面的表格：
| 属性值 | 说明 |
|---|---|
| scroll | 背景图片随页面滚动而滚动，默认值。 |
| fixed | 背景图片固定在视口的位置，不随页面滚动而滚动。 |
| local | 背景图片随着其所在的容器滚动而滚动，当容器滚动时，背景图片也跟随滚动，而不是整个页面。 |
根据上个案例，只需加上 background-attachment: fixed;属性，代码如下，就不会随着页面的滚动而滚动了。
<style>
body {
background-image: url(./img/bg3.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; /* 背景图片固定 */
}
</style>
效果如图：
这个例子中，背景图片将会固定在浏览器窗口的位置，不会随着页面的滚动而滚动。
这些属性的取值可以根据设计需求灵活使用，可以为网页带来不同的视觉效果和布局。但是每次设置一个背景，需要写5个属性，太多了，能不能一行写完呢？可以。
background 的混合写法
其实呢，通过巧妙地组合不同的背景属性，我们可以创建出丰富多彩的页面背景效果。
如何混合写呢？就以上一个案例来写吧，增加一个绿色的背景颜色。
<style>
body {
background: #2cecbc url(./img/bg3.png) no-repeat right top fixed;
}
</style>
效果如图：
当然，这种写法要注意以下 3 点：
- 属性顺序：通常情况下，background属性的写法顺序为：background-color、background-image、background-repeat、background-attachment、background-position。这些属性需要全写么？不必，按需。如果某些属性没有设置，则可以省略，但尽量保持顺序不变，比如，我完全可以把#2cecbc,right top去掉，直接就是background: url(./img/bg3.png) no-repeat fixed;,这样也没问题。
- 简写方式：使用background属性可以简化代码，但需要确保各个属性值的顺序和含义正确，避免混淆和错误。
- 可读性：尽量保持代码的可读性和易维护性，可以使用注释来说明各个属性的作用和含义，以便他人阅读和理解代码。
这样的设置，也达到了较为简洁而又美观的背景效果。
ok，以上，就是 background 的基础用法了，除了以上 5 个基础子属性，还有background-clip，background-origin，background-size等，这些需要依赖未来的学习，所以后续用到再说。
湘公网安备 43102202000103号