CSS 背景图片 - 绿叶网

在 CSS 中，我们可以使用 background-image 属性来为元素添加背景图片，从而使网页的展示效果更加丰富。

CSS 背景图片属性

在 CSS 中，与背景图片相关的属性主要有：background-image、background-repeat、background-position、background-attachment、background-size 等。

1. background-image

在 CSS 中，background-image 属性用于定义元素的背景图片。

语法：

background-image: url(路径);

说明：

background-image 属性的取值是一个 url() 函数，用于指定背景图片的路径，支持 .jpg、.png、.gif 等格式。

注意: 元素必须有宽度和高度（可以由 width 和 height 定义，也可以由子元素撑开），background-image 才会有效果。

2. background-repeat

在 CSS 中，background-repeat 属性用于定义背景图片的平铺方式。

语法：

background-repeat: 关键字;

说明：

background-repeat 属性取值是一个关键字，常用取值如下。

repeat（默认值）：在水平和垂直方向上都平铺。
repeat-x：仅在水平方向上平铺。
repeat-y：仅在垂直方向上平铺。
no-repeat：不平铺。
space：等间距平铺，首尾可能留空。
round：等比例缩放平铺，填满空间。

3. background-position

在 CSS 中，background-position 属性用于定义背景图片的位置。

语法：

background-position: x-position y-position;

说明：

background-position 属性的取值可以是长度值（px、%、em 等）或关键字（top、bottom、left、right、center）。x-position 表示背景图片在水平方向上的位置，y-position 表示背景图片在垂直方向上的位置。

例如，background-position: center center; 表示将背景图片在元素中水平居中和垂直居中。

4. background-attachment

在 CSS 中，background-attachment 属性用于定义背景图片的滚动行为。

语法：

background-attachment: 关键字;

说明：

background-attachment 的属性取值是一个关键字，常用取值如下。

scroll（默认值）：背景图片随页面滚动（默认值）。
fixed：背景图片固定于视口，不随页面滚动。
local：背景图片随元素内容滚动（如滚动容器）。

5. background-size

在 CSS 中，background-size 属性用于定义背景图片的大小。

语法：

background-size: 关键字;

说明：

background-size 的取值可以是一个数值，也可以是一个关键字。

当取值为数值时，表示指定背景图片的高度和宽度。此时可以设置一个值（同时设置宽高）或两个值（分别设置宽高）。

当取值为关键字时，常用取值如下。

auto（默认值）：表示背景图片保持其原始大小。
cover：表示背景图片等比例缩放以完全覆盖元素，可能会导致图片部分裁切。
contain：表示背景图片等比例缩放以完全包含在元素中，可能会在元素中留有空白。

提示: 如果小伙伴们想要深入了解每一个 CSS 背景图片属性，可以查阅相关手册：CSS 属性。

CSS 背景图片示例

接下来，我们通过几个简单的例子来讲解 CSS 是如何定义背景图片的。

示例 1：CSS 定义背景图片

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 250px;
            height: 250px;
            background-image: url(imgs/frog.jpg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

CSS 定义元素的背景图片

分析：

frog.jpg 这张图片的实际尺寸为 250px × 250px，这里也将 div 元素的尺寸同样设置为 250px × 250px，这样背景图片刚好铺满 div 元素。

特别注意，元素必须要有一定的宽度和高度，背景图片才会生效。如果把上面 div 的宽高删除，此时背景图片就不会显示出来了。小伙伴们可以自行试一下。

此外，下面两种引入背景图片的方式都是正确的，一个给路径加上了引号，另一个没加引号。

/* 写法 1：不加引号 */
background-image: url(imgs/frog.jpg);

/* 写法 2：加引号（推荐） */
background-image: url("imgs/frog.jpg");

不过在实际开发中，推荐使用加引号的方式（即写法 2），因为这种写法可以避免特殊字符引发的问题。URL 中包含特殊字符（如空格、#、& 等），不加引号可能导致解析错误，比如：

background-image: url(imgs/my image.jpg);      /* 错误：空格导致解析失败 */
background-image: url("imgs/my image.jpg");     /* 正确 */

此外，很多 CSS 预处理器（如 SASS、LESS）和构建工具在处理 url() 时，默认会生成带引号的 URL。

示例 2：CSS 定义背景图片的重复方式

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 1px solid silver;
            background-image: url("imgs/flower.svg");
         background-size: 20px;
        }
        div:nth-child(2) {
            background-repeat: repeat-x;
        }
        div:nth-child(3) {
            background-repeat: repeat-y;
        }
        div:nth-child(4) {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

页面效果如下图所示。

CSS 设置背景图片重复

分析：

在这个例子中，第 1 个 div 元素由于没有定义 background-repeat 属性值，因此会采用默认值 repeat。

此外还需要注意一点，元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果。这个道理，小伙伴们稍微想一下就明白了。

示例 3：CSS 定义背景图片的位置

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid gray;
            background-image: url("imgs/flower.svg");
            background-size: 100px 100px;
            background-repeat: no-repeat;
            background-position: right center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

CSS 设置背景图片位置

分析：

background-position: right center; 中的 “right center”，表示相对于左上角，水平方向在右边（right），垂直方向在中间（center）。

在实际开发中，background-position 一般用于实现 CSS Spirit（精灵图片）。

提示：下面例子必须在本地测试才有效果。

示例 4：CSS 定义背景图片的固定方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 160px;
            height: 1200px;
            border: 1px solid silver;
            background-image: url("imgs/flower.svg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

CSS 设置背景图片固定

分析：

我们在本地浏览器中拖动右边的滚动条会发现，背景图片在页面固定不动了。如果把 background-attachment: fixed; 这一行代码去掉，背景图片就会随着元素一起滚动。

提示: 在实际项目开发中，background-attachment 属性用得不多，不过它在实现 “视察滚动” 是非常有用的。