CSS 背景属性学习笔记
CSS 背景属性用于定义 HTML 元素的背景效果，包括背景颜色、背景图像、图像平铺方式、图像定位以及图像是否固定等。以下是关于 CSS 背景属性的详细学习笔记。
一、背景颜色（background-color）
background-color 属性用于定义元素的背景颜色。背景颜色可以应用于任何 HTML 元素，包括整个页面（通过在 <body> 标签中设置）。
颜色值的表示方式
-
十六进制：如
#ff0000（红色）。 -
RGB：如
rgb(255,0,0)（红色）。 -
颜色名称：如
red。
示例
css
复制
body {
background-color: #b0c4de; /* 浅蓝色 */
}二、背景图像（background-image）
background-image 属性用于定义元素的背景图像。默认情况下，背景图像会在水平和垂直方向平铺，以覆盖整个元素。
示例
css
复制
body {
background-image: url('paper.gif'); /* 设置背景图像 */
}三、背景图像的平铺（background-repeat）
background-repeat 属性用于控制背景图像的平铺方式。默认值是 repeat，表示在水平和垂直方向上平铺。
可选值
-
repeat：在水平和垂直方向上平铺（默认值）。 -
repeat-x：仅在水平方向上平铺。 -
repeat-y：仅在垂直方向上平铺。 -
no-repeat：不平铺。
示例
css
复制
body {
background-image: url('gradient2.png');
background-repeat: repeat-x; /* 仅在水平方向上平铺 */
}四、背景图像的定位（background-position）
background-position 属性用于设置背景图像的起始位置。默认情况下，背景图像从元素的左上角开始。
可选值
-
top、center、bottom：垂直方向上的位置。 -
left、center、right：水平方向上的位置。 -
也可以使用像素值或百分比值来精确控制位置。
示例
css
复制
body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: right top; /* 将图像定位到右上角 */
}五、背景图像的固定（background-attachment）
background-attachment 属性用于设置背景图像是否固定或者随着页面的其余部分滚动。
可选值
-
scroll：背景图像随页面滚动（默认值）。 -
fixed：背景图像固定，不随页面滚动。
示例
css
复制
body {
background-image: url('bgdesert.jpg');
background-attachment: fixed; /* 背景图像固定 */
}六、背景的简写属性（background）
为了简化代码，可以使用 background 简写属性将所有背景相关属性合并到一个声明中。属性值的顺序为：
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
示例
css
复制
body {
background: #ffffff url('img_tree.png') no-repeat fixed right top;
}七、更多实例
固定背景图像
css
复制
body {
background-image: url('bgdesert.jpg');
background-attachment: fixed;
}八、CSS 背景属性总结
表格
复制
| 属性 | 描述 |
|---|---|
background | 简写属性，将背景相关属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |