background-image用法详解

一、background-image怎么用

在CSS中，background-image用于设置元素的背景图像。它可以将一张或多张图像设置为元素的背景，同时支持设置图片的位置、尺寸、重复等属性。其中，background-image的取值可以是多张图像组成的列表，也可以是单张图像的URL。

下面是一些常见的background-image使用方式：

/*设置单张背景图像*/
div {
    background-image: url("background.jpg");
}
/*设置多张背景图像*/
div {
    background-image: url("background1.jpg"), url("background2.jpg");
}
/*设置背景图像并设置位置*/
div {
    background-image: url("background.jpg");
    background-position: center;
}

二、background-image取值选取

background-image的取值可以是单个URL，也可以是多个URL组成的列表。下面分别介绍一些常用的取值方式。

1. 使用单个URL

使用单个URL是最常见的方式，可以将一张图片设置为元素的背景。

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

2. 使用多个URL

使用多个URL可以将多张图片合并成一个元素的背景。需要注意的是，图片的顺序将决定它们在元素中的叠放顺序。

div {
  background-image: url("background1.jpg"), url("background2.jpg");
}

3. 使用线性渐变

使用线性渐变可以设置一个由两种或多种颜色渐变而成的背景。这种方式可以非常灵活地控制渐变的方向、起点、终点等属性。

div {
  background-image: linear-gradient(to bottom, #ffffff, #000000);
}

4. 使用径向渐变

使用径向渐变可以设置一个由中心向四周逐渐扩散的背景，也可以控制渐变的大小、形状等属性。

div {
  background-image: radial-gradient(circle, #ffffff, #000000);
}

5. 使用CSS Sprites

CSS Sprites是指将多个图像合并成一张单独的图像，然后通过background-position属性将需要的部分显示出来。这样做可以减少HTTP请求次数，提高页面加载速度。

div {
  background-image: url("sprites.jpg");
  background-position: -50px -50px;
}

三、如何搭配其他属性使用

除了background-image属性以外，CSS中还有一些与背景相关的属性，它们可以帮助我们更加灵活地控制元素的背景效果。

1. background-repeat

background-repeat用于指定背景图像的重复方式。它有以下取值：

• repeat：默认值，图像在水平和垂直方向上重复
• repeat-x：图像在水平方向上重复
• repeat-y：图像在垂直方向上重复
• no-repeat：图像不重复

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

2. background-position

background-position用于指定背景图像在元素中的位置。它有以下取值：

• length：表示以长度为单位的偏移量。例如，10px表示偏移10像素
• percentage：表示以百分比为单位的偏移量。例如，50%表示偏移元素的中心点位置
• top、bottom、left、right：表示偏移元素的顶部、底部、左侧、右侧位置
• center：表示偏移元素的中心点位置

div {
  background-image: url("background.jpg");
  background-position: center;
}

3. background-size

background-size用于指定背景图像的尺寸。它有以下取值：

• auto：默认值，图像按照原始尺寸显示
• cover：图像调整比例，填充整个元素
• contain：图像调整比例，完整展示在元素内
• length：表示以长度为单位的尺寸
• percentage：表示以百分比为单位的尺寸

div {
  background-image: url("background.jpg");
  background-size: cover;
}

4. background-attachment

background-attachment用于指定背景图像的滚动方式。它有以下取值：

• scroll：默认值，背景图像随着元素的滚动而滚动
• fixed：背景图像固定在页面上，不随元素滚动
• local：背景图像随着元素内部的滚动而滚动

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