当前位置：首页 > news >正文

CSS 背景属性学习笔记

news 2025/10/29 22:22:02

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`	设置背景图像是否及如何重复。