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 背景属性总结