1.1背景图片

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

1.2背景平铺

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

• 平铺效果:background-repeat:repeat
  image.png
• 不平铺效果：background-repeat:no-repeat
  
  image.png
• x轴平铺：background-repeat:repeat-x
• y轴平铺：background-repeat:repeat-y

1.3背景位置-方位名词

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

Snipaste_2020-05-13_17-18-57.png

h3{
            width:140px ;
            height: 40px;
            background-color: #fff;
            font-size: 14px;
            /* 取消粗体 */
            font-weight: 400;
            /* 与height一样高可以文字居中 */
            line-height: 40px;
            background-image: url(images/title_sprite.png);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 让图片存在于左中 */
            background-position: left center;
            /* 首行缩进2字符 */
            text-indent: 2em;
        }

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

1.4背景固定

• 背景固定：background-attachment:fixed ;
• 背景滚动：background-attachment:scroll ;
  案例2：大背景固定(背景不会随着文本移动）

 body{
            /* 大背景水平居中 */
            background-image: url(images/388021152363398.jpg);
            background-repeat: no-repeat;
            /* 大背景居中，上方留了40px的空 */
            background-position: center 40px;
            color:#fff;
            font-size:20px;
            /* 把背景图片固定住 */
            background-attachment:fixed ;
        }

1.5背景复合写法

一般约定为
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:black url(image.jpg) no-repeat fixed top;

1.6背景半透明

background:rgba(0,0,0,0.3)

• 最后一个参数是alpha透明度，取值范围在0~1之间
• 我们习惯把0.3的0省略，写为background:rgba(0,0,0,3);
• 注意：背景半透明指的是盒子背景半透明，盒子里面的内容不受影响。

1.7综合案例

image.png

  .nav a{
            /* 把a设置成行列块元素 */
            /* 行列块元素和块元素的区别
            块元素独占一行（可以设置高度）
            行列块元素高度宽度都可以设置，不会独占一行 */
            display:inline-block;
            background-color: #617172;
            width:120px;
            height: 58px;
            font-size: 14px;
            color:#fff;
            line-height: 48px;
            text-decoration: none;
         
            text-align: center;
        }
        .nav .bg1{
            background:url(images/xiaoqiang001-html_css_material-master/bg1.png) no-repeat;
        }
        .nav .bg2{
            background:url(images/xiaoqiang001-html_css_material-master/bg2.png) no-repeat;
        }
        .nav .bg3{
            background:url(images/xiaoqiang001-html_css_material-master/bg3.png) no-repeat;
        }
        .nav .bg4{
            background:url(images/xiaoqiang001-html_css_material-master/bg4.png) no-repeat;
        }
        .nav .bg5{
            background:url(images/xiaoqiang001-html_css_material-master/bg5.png) no-repeat;
        }
        /* 悬停换颜色 */
        .nav .bg1:hover{
            background:url(images/xiaoqiang001-html_css_material-master/bg11.png) no-repeat;
        }
        .nav .bg2:hover{
            background:url(images/xiaoqiang001-html_css_material-master/bg22.png) no-repeat;
        }

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