背景

1 作用

CSS背景属性允许你为网页元素添加视觉效果，使其更具吸引力和可读性。通过设置背景颜色、图片或者其他背景特效，可以让网页看起来更加生动、丰富。

2 语法

• background-color: 设置背景颜色。

div {
    background-color: lightblue;
}

• background-image: 设置背景图片。

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

• background-repeat: 设置背景图片的重复方式。

div {
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* 不重复 */
}

• background-position: 设置背景图片的位置。

div {
    background-image: url('background.jpg');
    background-position: center; /* 居中 */
}

• background-size: 设置背景图片的尺寸。

div {
    background-image: url('background.jpg');
    background-size: cover; /* 自适应容器，保持完全覆盖 */
}

• background-attachment: 设置背景图片的滚动方式。

div {
    background-image: url('background.jpg');
    background-attachment: fixed; /* 固定不滚动 */
}

• background: 上述属性的缩写形式，可以同时设置多个背景属性。