您的位置:

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;
}