12 CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

12.1 背景颜色

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

语法

background-color:颜色值;

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

例子

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

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

12.2 背景图片

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

语法

background-image: none | url(url)
表2.1: 背景图片
参数值 url
none 无背景图（默认）
url 使用绝对或相对地址指定背景图片

例子

<head>
    <style>
        div {
            width: 800px;
            height: 800px;
            background-image: url(../图片/men.jpeg);
        }
    </style>
</head>

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

12.3 背景平铺

如果需要在HTML页面上对背景进行平铺，可以使用background-repeat属性

语法

background-repeat: repeat | no-repeat | repeat-x | repeat-y
表8.2: 背景平铺参数值
参数值 作用
repeat 背景图片在x轴和y平铺（默认）
no-repeat 背景图片不平铺
repeat-x 背景图片在x轴方向平铺
repeat-y 背景图片在y轴方向平铺

例子

<head>
    <style>
        div {
            width: 800px;
            height: 800px;
            background-image: url(../图片/men.jpeg);
            /* 默认情况下，背景图片平铺 */
            /* background-repeat: no-repeat; */
            /* 背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 背景图片沿着x轴平铺  */
            /* background-repeat: repeat-x; */
            /* 背景图片沿着y轴平铺  */
            background-repeat: repeat-y;
            background-color: green;

        }
    </style>
</head>

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

注意：页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色

12.4 背景图片的位置

利用background-position属性可以改变图片在背景中的位置。

语法

background-position: x y;
表4.3: 背景图片位置
参数值 说明
length 百分数|由浮点数和单位标识符组成的长度值
position top|center|bottom|left|right 方位名词

12.4.1 参数是方位名词

例子:王者荣耀官网

  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致

  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

例子

<head>
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            background-image: url(../图片/men.jpeg);
            background-repeat: no-repeat;
            background-color: green;
            /* 水平居中，垂直靠上 */
            /* background-position: center top; */
            /* 水平靠右，垂直居中 */
            /* background-position: right center; */
            /* 如果是方位名词，单次顺序可以互换： center和roght */
            /* background-position: center right; */
            /* 方位名词的第二个参数省略时，默认为center */
            background-position: right;

        }
    </style>
</head>

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

12.4.2 参数是精确单位

  • 如果参数是精确单位，那么第一个一定是x坐标，第二个是y坐标。
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

例子

<head>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            background-color: pink;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(../图片/title_sprite.png);
            background-repeat: no-repeat;
            /* x轴是20  y轴是50 */
            background-position: 20px 50px;
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>成长守护平台</h3>
</body>

12.4.3 参数是混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

例子

<head>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            background-color: pink;
            background-image: url(../图片/title_sprite.png);
            background-repeat: no-repeat;
            /* 混合单位 x为20  y是center */
            background-position: 20px center;
            text-indent: 1.5em;
        }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
</body>

12.5 背景尺寸

设置背景图片的尺寸大小。

选择器 {
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
}

12.6 背景图像固定（背景附着）

相当于页面往下滑时，背景图片仍然保持在当前页面。

实例：QQ官网

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。 background-attachment后期可以制作视差滚动的效果。

语法

background-attachment: scroll | fixed
表6.1: 背景附着
参数 作用
scroll 背景图片随对象内容滚动（默认）
fixed 背景图像固定

例子

<head>
    <style>
        body {
            background-position: center top;
            background-repeat: no-repeat;
            background-image: url(fig/17-02.jpg);
            color: #fff;
            font-size: 20px;
            /* 把背景图片固定 */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
    <p>天王盖地虎，pink老师一米五</p>
</body>

12.7 背景属性复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为: background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

例子

<head>
    <style>
        body {
            background: #fff url(fig/17-02.jpg) no-repeat fixed center top;
        }
    </style>
</head>

<body>
    <p>天王盖地虎，pink老师一米五</p>
</body>

12.8 背景色半透明

CSS3为我们提供了背景色半透明的效果。

语法

background: rgb(0, 0, 0, 0.3);

注意

  • 最后一个参数是alpha透明度，取值范围在0~1之间

  • 我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3);

  • 注意∶背景半透明是指盒子背景半透明，盒子里面的内容不受影响CSS3新增属性，是IE9+版本浏览器才支持的

  • 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

例子

<head>
    <style>
        div {
            height: 200px;
            width: 200px;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div>隐形的翅膀</div>
</body>

12.9 背景总结

表12.1: 背景总结
属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB
background-image 背景图片 url(图片路径)
background-repeat 背景平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position x/y
background-attachment 背景附着 scroll（背景滚动）/fixed（背景固定）
背景简写 书写简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明 背景色半透明 background:rgba(0,0,0,0.3)

背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)

12.10 案例

12.10.1 背景图片案例：方位名词

<head>
    <style>
        body {
            background-position: center top;
            background-repeat: no-repeat;
            background-image: url(fig/17-02.jpg);
        }
    </style>
</head>

<body>

</body>

12.11 五彩导航栏

五彩导航效果

图4.4: 五彩导航效果

练习价值:

1．链接属于行内元素,但是此时需要宽度高度,因此需要模式转换

2．里面文字需要水平居中和垂直居中.因此需要单行文字垂直居中的代码.

3．链接里面需要设置背景图片.因此需要用到背景的相关属性设置.

4．鼠标经过变化背景图片,因此需要用到链接伪类选择器.

代码

<head><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>Document</title>
    <style>
        .nav a {
            /* 行内块元素，可以设置宽和高，又在同一行 */
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 52px;
            color: white;
            /* 取消下划线 */
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(../../html_css_material-master/第四天/images/bg1.png) no-repeat;
        }

        .nav .bg2 {
            background: url(../../html_css_material-master/第四天/images/bg2.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(../../html_css_material-master/第四天/images/bg11.png );
        }

        .nav .bg2:hover {
            background-image: url(../../html_css_material-master/第四天/images/bg22.png );
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
    </div>

</body>
    <style>
        .nav a {
            /* 行内块元素，可以设置宽和高，又在同一行 */
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 52px;
            color: white;
            /* 取消下划线 */
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(../../html_css_material-master/第四天/images/bg1.png) no-repeat;
        }

        .nav .bg2 {
            background: url(../../html_css_material-master/第四天/images/bg2.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(../../html_css_material-master/第四天/images/bg11.png );
        }

        .nav .bg2:hover {
            background-image: url(../../html_css_material-master/第四天/images/bg22.png );
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
    </div>

</body>