CSS Sprites 是 CSS 图像合成技术，有的称 CSS 精灵有的称雪碧图，他的作用就是把网页上很多小图标放到一张图片里面，然后通过 CSS 里面的 background-position 来控制每个图片的坐标，再利用 CSS 的“background-image”，“background- repeat”的组合来精确的定位出背景图片的位置。

    使用场景

    • 1.静态图片，不随用户信息的变化而变化
    • 2.小图片，图片容量比较小
    • 3.加载量比较大
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.    <style>
    9.        *{
    10.            margin:0;
    11.            padding: 0
    12.        }
    13.        ul,li{
    14.            list-style: none;
    15.        }
    16.        .nav{
    17.            width:736px;
    18.            height: 78px;
    19.            margin:50px auto;  
    20.        }
    21.        .nav li{
    22.         float: left;
    23.         margin-right: 2px;
    24.        }
    25.        .nav li:nth-child(1){
    26.            width:98px;
    27.        }
    28.        .nav li:nth-child(2){
    29.            width:122px;
    30.        }
    31.        .nav li:nth-child(3){
    32.            width:144px;
    33.        }
    34.        .nav li:nth-child(4){
    35.            width:118px;
    36.        }
    37.        .nav li:nth-child(5),.nav li:nth-child(6){
    38.            width:122px;
    39.        }
    40.        .nav li:nth-child(6){
    41.            margin-right: 0;
    42.        }
    43.        .nav li a{
    44.            display: block;
    45.            height: 78px;
    46.            background: url(img/nav.png) no-repeat;
    47.        }
    49.        .nav li:nth-child(2) a{
    50.            background-position: -100px 0;
    51.        }
    52.        .nav li:nth-child(3) a{
    53.            background-position: -224px 0;
    54.        }
    55.        .nav li:nth-child(4) a{
    56.            background-position: -370px 0;
    57.        }
    58.        .nav li:nth-child(5) a{
    59.            background-position: -490px 0;
    60.        }
    61.        .nav li:nth-child(6) a{
    62.            background-position: -614px 0;
    63.        }
    64.        .nav li a:hover{
    65.            background: url(img/nav-on.png) no-repeat;
    66.        }
    67.        .nav li:nth-child(2) a:hover{
    68.            background-position: -100px 0;
    69.        }
    70.        .nav li:nth-child(3) a:hover{
    71.            background-position: -224px 0;
    72.        }
    73.        .nav li:nth-child(4) a:hover{
    74.            background-position: -370px 0;
    75.        }
    76.        .nav li:nth-child(5) a:hover{
    77.            background-position: -490px 0;
    78.        }
    79.        .nav li:nth-child(6) a:hover{
    80.            background-position: -614px 0;
    81.        }
    82.    </style>
    83. </head>
    84. <body>
    85.     <ul class="nav">
    86.         <li><a href="javascript:;"></a></li>
    87.         <li><a href="javascript:;"></a></li>
    88.         <li><a href="javascript:;"></a></li>
    89.         <li><a href="javascript:;"></a></li>
    90.         <li><a href="javascript:;"></a></li>
    91.         <li><a href="javascript:;"></a></li>
    92.     </ul>
    93. </body>
    94. </html>