CSS 背景属性学习笔记

一、CSS 背景属性概述

CSS 背景属性用于定义 HTML 元素的背景效果，主要包括以下几种属性：

background-color：定义元素的背景颜色。
background-image：定义元素的背景图像。
background-repeat：定义背景图像如何重复。
background-attachment：定义背景图像是否固定或者随页面滚动。
background-position：定义背景图像的起始位置。

二、背景颜色

1. 定义

background-color 属性用于定义元素的背景颜色。

2. 示例

css复制

body {background-color: #b0c4de;
}

3. 颜色值的表示方法

CSS 中颜色值通常有以下几种表示方法：

十六进制：如 "#ff0000"。
RGB：如 "rgb(255,0,0)"。
颜色名称：如 "red"。

4. 应用实例

css复制

h1 {background-color: #6495ed;
}
p {background-color: #e0ffff;
}
div {background-color: #b0c4de;
}

三、背景图像

1. 定义

background-image 属性用于定义元素的背景图像。

2. 默认行为

默认情况下，背景图像会在水平和垂直方向上平铺，以覆盖整个元素。

3. 示例

css复制

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

4. 注意事项

如果背景图像与文字颜色对比度低，可能会导致文本可读性差，如下例：

css复制

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

四、背景图像的平铺

1. 水平或垂直平铺

默认情况下，背景图像会在水平或垂直方向上平铺。

2. 示例

css复制

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

3. 仅水平平铺

如果希望背景图像仅在水平方向上平铺，可以使用 background-repeat: repeat-x;：

css复制

body {background-image: url('gradient2.png');background-repeat: repeat-x;
}

五、背景图像的定位与固定

1. 不平铺

如果不想让背景图像平铺，可以使用 background-repeat: no-repeat;：

css复制

body {background-image: url('img_tree.png');background-repeat: no-repeat;
}

2. 定位

可以使用 background-position 属性来改变背景图像的位置，例如：

css复制

body {background-image: url('img_tree.png');background-repeat: no-repeat;background-position: right top;
}

3. 固定背景图像

如果希望背景图像固定，不随页面滚动，可以使用 background-attachment: fixed;：

css复制

body {background-image: url('img_tree.png');background-repeat: no-repeat;background-attachment: fixed;background-position: right top;
}

六、背景简写属性

1. 定义

为了简化代码，可以将多个背景属性合并到一个 background 属性中。

2. 示例

css复制

body {background: #ffffff url('img_tree.png') no-repeat right top;
}

3. 属性顺序

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

4. 注意事项

不需要使用所有属性，可以根据需要选择使用。
如果省略某些属性，浏览器会使用默认值。

七、CSS 背景属性总结

属性	描述
`background`	简写属性，将背景属性设置在一个声明中。
`background-attachment`	背景图像是否固定或者随页面滚动。
`background-color`	设置元素的背景颜色。
`background-image`	把图像设置为背景。
`background-position`	设置背景图像的起始位置。
`background-repeat`	设置背景图像是否及如何重复。