CSS sprites简单实例

最新推荐文章于 2024-04-13 14:13:56 发布

法海你懂不

最新推荐文章于 2024-04-13 14:13:56 发布

阅读量7.6k

点赞数 2

分类专栏： HTML 文章标签： css html

本文链接：https://blog.csdn.net/u013595419/article/details/50465935

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于雪碧图(css sprites)网上已经有非常详细的介绍，比如百度百科，最简单的来说，CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，然后利用background-position属性对图片所需要的部分进行精确定位，从而达到减少服务器请求次数的目的。

这里主要使用雪碧图实现一个最简单的小图标导航展示。具体代码可以见附件1，素材详见附件2，效果图详见附件3。

本例使用内部样式的方式对整个文档格式化处理，最核心的部分采用无序列表的方式完成对导航条目的排版。内部样式中:#mainbody{}部分即对主体部分完成初试化工作，接下来清除CSS中ul的默认属性，然后对列表中的每一行li完成初始化工作，其次对h3格式进行重置，满足自身需要，使用text-indent属性让文字缩进，以便于腾出置放图标的空间，最后便是关于CSS sprites中最核心的部分：

background: url(00.png) no-repeat;

.sp-1 i{background-position: 0px 0px;}
.sp-2 i{background-position: -26px 0px;}
.sp-3 i{background-position: -26px -27px;}
.sp-4 i{background-position: 0px -27px;}

这里应尤其注意到background-position属性中坐标的方向问题，CSS中规定图片的左上方为原点(0px 0px)，向左为水平正方向，向上为竖直正方向，而且在写坐标时应特别注意不要忘记单位px

附件1

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" />
    <title>CSS Sprites</title>
    <style type="text/css">
    *{margin: 0px; padding: 0px;}
    #mainbody{
        position: relative;
        width: 100px;
        height: 150px;
        border: solid 2px #fff;
        padding: 2px;
    }
    ul{list-style: none;}
    li{
        display: block;
        height: 25px;
        line-height: 25px;
        overflow: hidden;
        margin: 5px;
        border-bottom: 3px solid #dedede
    }
    h3{
        font-weight: 100;
        font-size: 14px;
        text-indent: 10px;
    }
    li i{
        background: url(00.png) no-repeat;
        display: inline;
        width: 25px;
        height: 25px;
        float: left;
    }
    .sp-1 i{background-position: 0px 0px;}
    .sp-2 i{background-position: -26px 0px;}
    .sp-3 i{background-position: -26px -27px;}
    .sp-4 i{background-position: 0px -27px;}
    </style>
</head>
<body>
<div id="mainbody">
    <ul>
        <li class="sp-1">
            <i></i>         
            <h3>主页</h3>
        </li>
        <li class="sp-2">
            <i></i>         
            <h3>空间</h3>
        </li>
        <li class="sp-3">
            <i></i>         
            <h3>网络</h3>
        </li>
        <li class="sp-4">
            <i></i>         
            <h3>其他</h3>
        </li>
    </ul>
</div>
</body>
</html>