【乔二参】CSS 背景详解

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

CSS 背景（Background）是网页设计中非常重要的一部分，它允许你控制元素的背景颜色、背景图像、背景图像的重复方式、位置以及背景图像是否固定等。以下是对 CSS 背景属性的详细解释：

1. 背景颜色（background-color）

使用 background-color 属性可以为元素设置背景颜色。你可以使用颜色名称、十六进制颜色代码、RGB 值、RGBA 值、HSL 值、HSLA 值或透明度值来定义颜色。

body {
  background-color: #f0f0f0; /* 十六进制颜色代码 */
}

div {
  background-color: rgba(255, 0, 0, 0.5); /* 带有透明度的红色 */
}

2. 背景图像（background-image）

使用 background-image 属性可以为元素设置背景图像。你可以使用 url() 函数来指定图像的路径。

body {
  background-image: url('background.jpg');
}

3. 背景重复（background-repeat）

使用 background-repeat 属性可以控制背景图像是否及如何重复。可能的值包括 repeat（水平和垂直重复）、repeat-x（仅水平重复）、repeat-y（仅垂直重复）和 no-repeat（不重复）。

body {
  background-image: url('pattern.png');
  background-repeat: repeat-x; /* 图像仅在水平方向上重复 */
}

4. 背景位置（background-position）

使用 background-position 属性可以设置背景图像在元素中的起始位置。你可以使用关键字（如 top、bottom、left、right、center）或精确的像素值、百分比值来指定位置。

body {
  background-image: url('sun.png');
  background-position: right top; /* 图像位于右上角 */
}

5. 背景附着（background-attachment）

使用 background-attachment 属性可以设置背景图像是否固定或者随着页面的其余部分滚动。可能的值包括 scroll（默认值，背景图像随着页面其余部分滚动）、fixed（背景图像固定，不随页面滚动）和 local（背景图像相对于元素内容的位置固定）。

body {
  background-image: url('sky.jpg');
  background-attachment: fixed; /* 背景图像固定不动 */
}

6. 背景尺寸（background-size）

使用 background-size 属性可以设置背景图像的大小。可能的值包括 auto（默认值，图像保持原始尺寸）、cover（图像缩放以完全覆盖元素，可能被截断）和 contain（图像缩放以适应元素的尺寸，可能留下空白）。你还可以使用精确的像素值、百分比值或 auto 关键字的组合来指定宽度和高度。

div {
  background-image: url('flower.jpg');
  background-size: cover; /* 图像缩放以覆盖整个元素 */
}

7. 背景复合写法（background）

你可以使用 background 复合属性来同时设置上述所有背景属性，只需在一个声明中列出它们，用空格分隔。

body {
  background: #f0f0f0 url('background.jpg') no-repeat right top fixed;
}

以上属性按照以下顺序列出（可选）：

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
6. background-size

注意，这些属性的顺序是固定的，不能随意更改。如果省略了某个值，则该值将使用其默认值。

友情提示