CSS背景background、background-position使用详解

背景概述

在 CSS 中，每个元素都可以有一个背景。
背景是一个用来设置元素背景表现的 CSS 属性合集，包括颜色、图片、位置、大小等。

CSS背景属性

background-color

用于设置元素背景的颜色。

div {
  background-color: #ffffff; 
}

background-image

用于设置元素背景的图片。

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

background-repeat

用于设置元素背景图像的重复方式。 它接受以下五个值：
- repeat（平铺）
- repeat-x (水平平铺)
- repeat-y (垂直平铺)
- no-repeat (不平铺)
- inherit（从父元素继承）

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

background-attachment

用于指定背景图像是否固定或者随着页面的其余部分滚动。它接受两个值：
- scroll（背景图像会随着页面滚动）
- fixed（背景图像不会随着页面滚动）

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

background-position

用于设置元素背景图片的位置。 它可以使用关键字center，top，left，bottom和right，以及用百分比或像素描述的位置。

div {
  background-image: url('bg.jpg');
  background-position: top left; 
}

可以通过更改关键字或更改像素进行定位，如下所示：

div {
  background-image: url('bg.jpg');
  background-position: 50px 20px; 
}

示例说明

示例一：平铺

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

该示例使页面中的背景图像（bg.jpg）平铺，直到背景被填满。

示例二：居中

header {
  background-image: url('header-bg.jpg');
  background-repeat: no-repeat; 
  background-position: center center; 
}

该示例将背景图像(header-bg.jpg)放在页面过头部，并在水平和垂直方向上居中。