CSS background 属性

CSS background 语法

在 CSS 中，background 是一个复合属性，它是以下 CSS 属性的简写。

语法：

background: image position/size repeat attachment origin clip color;

说明：

background 属性由上面提到的 8 个子属性组成，你可以使用任何顺序来使用这些子属性取值的组合（尽管规范中推荐的顺序在上面）。

需要清楚的是，如果你不在 background 取值中指定某个子属性的值，那么该子属性就会使用它的默认值。

提示: 在实际项目开发中，并不推荐使用 background 复合属性，而是推荐使用 background 子属性来单独设置。

CSS background 摘要

属于	CSS 背景
使用频率	中
是否继承	否
默认值	使用子属性的默认值
兼容性	查看
官方文档	查看
MDN	查看

CSS background 示例

下面先来看一个例子：我们有一张 200px * 200px 的小图片（如下图所示），然后通过不同的 background 设置，来看看实际效果如何。

示例 1：background 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background: url("imgs/bird.jpg") top left / 50% no-repeat skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

background 基本用法

分析：

background: url("imgs/bird.jpg") top left / 50% no-repeat skyblue;

上面这一句代码等价于：

background-image: url("imgs/bird.jpg");
background-positon: top left;
background-size: 50%;
background-repeat: no-repeat;
background-color: skyblue;

background 实现多背景图片

在 CSS3 中，增加了对多个背景图片的支持，任何与背景相关的属性都可以使用逗号分割的列表，请看下面例子。

示例 2：background 实现多背景图片

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background: url("imgs/bird.jpg") top left no-repeat, 
                        url("imgs/goat.jpg") top right no-repeat;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

background实现多背景图片