一、CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1. 背景颜色

background-color属性定义了元素的背景颜色。

1.1 使用方式

background-color: 颜色值|transparent(透明);

一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明色。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景之背景颜色</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* background-color: transparent;   透明的，清澈的 */
            background-color: steelblue;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

CSS篇十——（1）_html

2. 背景图片

background-image属性描述了元素的背景图像。实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

2.1 使用方式

background-image: none|url (url)

参数值

作用

none

无背景图（默认的）

url(url)

使用绝对或相对地址指定背景图像

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景之背景图片</title>
    <style>
        div {
            width: 500px;
            height: 600px;
            /* 不要落下 url（url） */
            background-image: url(images/baidu_logo.png);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS篇十——（1）_背景图_02

3. 背景平铺

background-repeat属性使背景图片在HTML页面上进行平铺。

3.1 使用方式

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值

作用

repeat

背景图像在纵向和横向上平铺（默认）

no-repeat

背景图像不平铺

repeat-x

背景图像在横向上平铺

repeat-y

背景图像在纵向平铺

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景之背景图片、背景平铺</title>
    <style>
        div {
            width: 900px;
            height: 6800px;
            /* 不要落下 url（url） */
            background-image: url(images/baidu_logo.png);
            /* 背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 默认情况下图片是平铺的 */
            /* background-repeat: repeat; */
            /* 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 沿着y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
            background-color: steelblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS篇十——（1）_html_03