美文网首页
CSS Sprites 使用案例

CSS Sprites 使用案例

作者: 索隆萨克 | 来源:发表于2018-07-30 19:56 被阅读13次

CSS 精灵

多张图片整合在一张图片上，适用于小图片集合。

  1. 优点：减少请求
  2. 缺点：重复操作，计算每一个图片位置
  3. 使用时，下图每一列的y坐标不变，x坐标改变

  4. 一般情况下，坐标都是负数


    图片坐标.png

示例图片


timg.jpg 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css sprite 使用案例</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }

    ul.Sprites {
        margin: 0 auto;
        width: 928px;
        padding: 10px;
    }

    ul.Sprites li {
        float: left;
        width: 70px;
        height: 80px;
        font-size: 14px;
        line-height: 24px;
        text-align: left;
        overflow: hidden;
        margin: 0 23px;
    }

    ul.Sprites li span {
        display: inline-block;
        width: 70px;
        padding-top: 5px;
        height: 52px;
        overflow: hidden;
        background: url("../images/timg.jpg") no-repeat;
        cursor: pointer;
    }

    ul.Sprites li a {
        display: block;
        width: 70px;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }
    ul.Sprites li span.cp1{
        background-position: -6px -5px;
    }

    ul.Sprites li span.cp2{
        background-position: -163px -5px;
    }

    ul.Sprites li span.cp3{
        background-position: -322px -5px;
    }

    ul.Sprites li span.cp4{
        background-position: -481px -5px;
    }

    ul.Sprites li span.cp5{
        background-position: -6px -125px;
    }

    ul.Sprites li span.cp6{
        background-position: -163px -125px;
    }

    ul.Sprites li span.cp7{
        background-position: -322px -125px;
    }

    ul.Sprites li span.cp8{
        background-position: -481px -125px;
    }
    </style>
</head>

<body>
    <div id="contain">
        <ul class="Sprites">
            <li><span class="cp1"></span><a href="">图片</a></li>
            <li><span class="cp2"></span><a href="">相机</a></li>
            <li><span class="cp3"></span><a href="">文件夹</a></li>
            <li><span class="cp4"></span><a href="">短信</a></li>
            <li><span class="cp5"></span><a href="">地图</a></li>
            <li><span class="cp6"></span><a href="">钱包</a></li>
            <li><span class="cp7"></span><a href="">邮件</a></li>
            <li><span class="cp8"></span><a href="">股票</a></li>
        </ul>
    </div>
</body>

</html>

使用时注意图片路径

最终效果如下
demo.png

相关文章