HTML + CSS 连载 | 24 - CSS 设置背景

一、设置背景-background-image

在开发中，为了让网页更加美观，我们经常会设置各种各样的背景，比如

background-image 属性用于设置元素的背景图片，这个背景图片会盖在 background-color 上面。

新建一个 HTML 页面，设置 background-image，具体代码如下：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 1000px;
      height: 1000px;
      background-color: #f00;

      /*设置背景图片*/
      background-image: url(../images/2970184.png);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开该 HTML 页面，效果如下：

可以看到 background-image 背景图片是盖在 background-color 背景颜色上面的，background-image 也支持设置多张图片，多张图片之间使用逗号隔开，并且显示的顺序为设置的顺序，第一个设置的图片会在最上面，其他一次叠加在下面。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 1000px;
      height: 1000px;
      background-color: #f00;

      /*设置背景图片*/
      background-image: url(../images/2970184.png);
      /*设置不重复图片*/
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

需要注意的是如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。

CSS 复制代码

.box {
  /*width: 1000px;
  height: 1000px;*/
  background-color: #f00;

  /*设置背景图片*/
  background-image: url(../images/2970184.png);
  /*设置不重复图片*/
  background-repeat: no-repeat;
}

注释掉 CSS 设置的宽高之后，图片不再显示出来。

二、设置背景-background-repeat

前面的代码中如果设置了元素的宽高是大于图片的情况下，图片会出现重复或者平铺的情况，这种情况可以使用 background-repeat 属性来控制。

background-repeat 属性用于设置背景图片是否要平铺，常见的设置的值有：

repeat：平铺，在水平和垂直方向上平铺
no-repeat：不平铺
repeat-x：只在水平方向上平铺
repeat-y：只在处置方向上平铺

background-repeat 属性的默认值是 repeat，会在水平和垂直方向上平铺，新建 HTML 页面，代码如下：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      height: 800px;

      background-image: url(../images/1228984.png);
      
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开页面，效果如下：

我们可以设置在水平方向上平铺，修改 CSS 代码为如下形式：

CSS 复制代码

    .box {
      width: 800px;
      height: 800px;

      background-image: url(../images/1228984.png);
      background-repeat: repeat-x;
    }

也可以设置只在垂直方向上平铺，修改 CSS 代码为如下形式：

CSS 复制代码

    .box {
      width: 800px;
      height: 800px;

      background-image: url(../images/1228984.png);
      background-repeat: repeat-y;
    }

当然我们也可以设置不平铺，使用 no-repeat 属性值即可，修改 CSS 代码为如下形式：

CSS 复制代码

    .box {
      width: 800px;
      height: 800px;

      background-image: url(../images/1228984.png);
      background-repeat: no-repeat;
    }

利用平铺的特性，我们可以实现这样一个由多个相同图片构成的背景。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      /*设置背景图片，默认是会在水平和垂直方向上平铺，无须任何设置*/
      background-image: url(../images/wall.png);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开该 HTML 页面，效果如下：

三、设置背景-background-size

background-size 可以设置背景图片的大小，包含以下几个值：

auto：默认值，以背景图片本身大小显示
cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见
contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage>：百分比，相对于背景区
<length>：具体的长度，比如 100px

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      /*设置背景图片及平铺方式*/
      background-image: url(../images/1228984.png);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

设置背景尺寸之前的效果如下：

通过 background-size 设置背景属性：

CSS 复制代码

.box {
  width: 600px;
  height: 600px;
  background-color: #f00;

  /*设置背景图片及平铺方式*/
  background-image: url(../images/1228984.png);
  background-repeat: no-repeat;

  /*设置图片尺寸*/
  background-size: contain;
}

设置为 contain，会把某一边拉伸，具体效果如下：

修改 background-size 属性：

CSS 复制代码

.box {
  width: 600px;
  height: 600px;
  background-color: #f00;

  /*设置背景图片及平铺方式*/
  background-image: url(../images/1228984.png);
  background-repeat: no-repeat;

  /*设置图片尺寸*/
  background-size: cover;
}

设置为 conver，图片会保持原来的宽高比，超出的部分会被隐藏，具体效果如下：

除了固定值之外，也可以设置百分比：

CSS 复制代码

    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      /*设置背景图片及平铺方式*/
      background-image: url(../images/1228984.png);
      background-repeat: no-repeat;

      /*设置图片尺寸*/
      background-size: 100% 100%;
    }

在浏览器中打开 HTML 页面，具体效果如下：

当然也可以设置具体的值：

CSS 复制代码

.box {
  width: 600px;
  height: 600px;
  background-color: #f00;

  /*设置背景图片及平铺方式*/
  background-image: url(../images/1228984.png);
  background-repeat: no-repeat;

  /*设置图片尺寸*/
  background-size: 100px 100px;
}

在浏览器中打开 HTML 页面，具体效果如下：