background 可以定义元素的背景。与许多属性样式类似，它是多个属性的缩写， background-color（背景颜色）、 background-image （背景图像）、 background-clip （背景裁减区域）、 background-origin （背景原点）、 background-position （背景位置）、 background-repeat （背景重复模式）、 background-size （背景尺寸）、 background-attachment （背景依附模式）。

$$tip

元素可以设置多个背景图像，只需用 , 分隔，比如以下的例子。

<div class="box"></div>
<style>
    .box {
        width: 350px;
        height: 200px;
        background-image: url(https://3yya.com/logo-mini.png),
            url(https://3yya.com/jinji.jpg);
        background-position: center;
        background-size: auto, cover;
        background-repeat: no-repeat;
    }
</style>

$$demo

<style>

.box {

width: 350px;

height: 200px;

background-image: url(https://3yya.com/logo-mini.png),

url(https://3yya.com/jinji.jpg);

background-position: center;

background-size: auto, cover;

background-repeat: no-repeat;

}

</style>

背景颜色

background-color 可以设置背景的颜色，取值是颜色单位。

背景图像

background-image 属性用于设置元素背景图片，有以下取值：

none：默认值，没有图片。
image：图片地址。

背景裁减区域

background-clip 可以设定背景的裁减区域，有以下取值：

border-box：默认值，背景显示在边框内。
padding-box：背景显示在内边距内。
content-box：背景显示在内容区域。

背景原点

background-origin决定了背景图像的起始原点。

padding-box：默认值，背景图片以内边距作为起始原点。
border-box：背景图片以边框为起始原点。
content-box：背景图片以内容区域为起始原点。

背景位置

background-position 决定了背景的位置，这个位置是相对于由 background-origin 定义的位置图层的。

背景重复模式

background-repeat 定义了背景的重复模式，有以下取值：

repeat：图像在水平和垂直方向上重复，超出的部分会被裁剪。
repeat-x：图像仅在水平方向上重复，超出部分会被裁剪。
repeat-y：图像仅在垂直方向上重复，超出部分会被裁剪。
space：图像在水平和垂直方向上尽可能地重复，不会被裁剪，使用空白间隔平均分布。
round：在水平和垂直方向上重复，选择最接近的图像数量，并且图像会被拉伸或压缩。
no-repeat：不重复。

backgounrd-repeat 可以设置双值，第一个是水平方向、第二个是垂直方向。

/* 等同于 background-repeat: repeat-x; */
background-repeat: repeat no-repeat;
/* 水平方向 round 重复、垂直方向 space 重复 */
background-repeat: round space;

背景尺寸

background-size 可以设置背景图像的尺寸，有以下取值：

contain：图像会完全显示，且宽或高与容器一致，并且保持原图的宽高比。
cover：图像会完全占满元素容器，且宽或高与容器一致，并且保持原图的宽高比。
长度
百分比

背景依附模式

background-attachment 可以设置背景图像的依附模式，决定背景图像是否随着元素内容或页面滚动：

scroll：默认值，背景图像随着页面滚动，但不随着元素内容滚动。
fixed：背景图像不随着页面或元素内容滚动。
local：背景图像随着页面或元素内容而滚动。

练习

实现以下的效果。

$$demo

<div class="box">进击的巨人</div>

<style>

.box {

width: 350px;

height: 200px;

background-image: url(https://3yya.com/jinji.jpg);

background-size: cover;

font-size: 36px;

font-weight: bold;

color: white;

line-height: 200px;

text-align: center;

}

</style>

$$answer

<div class="box">进击的巨人</div>

<style>
    .box {
        width: 350px;
        height: 200px;

        background-image: url(https://3yya.com/jinji.jpg);
        background-size: cover;

        font-size: 36px;
        font-weight: bold;
        color: white;

        line-height: 200px;
        text-align: center;
    }
</style>

使用以下图片作为 html 的背景完成实例效果。

$$demo <div class="container"> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> </div> <style> html { background-image: url(https://qiniu.3yya.com/c099af15d685219f8fc8c69bfa66a2eb/c099af15d685219f8fc8c69bfa66a2eb.png); background-attachment: fixed; }

.container {
    height: 300px;
    overflow: auto;
}

.title {
    color: white;
}

</style> $$

$$answer

<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<style>
    html {
        background-image: url(/lv.png);
        background-attachment: fixed;
    }

    .title {
        color: white;
    }
</style>