css--图片整合（精灵图）

最新推荐文章于 2024-03-10 14:43:45 发布

weixin_34418883

最新推荐文章于 2024-03-10 14:43:45 发布

阅读量320

点赞数

原文链接：https://segmentfault.com/a/1190000015710978

版权

图片整合（精灵图）

精灵图的优点：

减少图片的字节
减少了网页的http请求，从而大大的提高了页面的性能
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

通用代码如下：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片整合</title>

<style>
.box{
    width:200px;
    margin:0 auto;
    overflow:hidden;
    background:url(img_navsprites_hover.gif    )0 0;
    background:no-repeat;
    
}


.into{
    float:left;
    width:43px;
    margin-left:10px;
    height:    44px;
    
}

.span1{
    background:url(img_navsprites_hover.gif    )0 0;
}


.span1:hover{background: url('img_navsprites_hover.gif') 0 -45px;}


.span2{background:url('img_navsprites_hover.gif') -47px 0;}


.span2:hover{background: url('img_navsprites_hover.gif') -47px -45px;}



.span3{background:url('img_navsprites_hover.gif') -91px 0}


.span3:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

</style>
</head>
<body>
    <div class="box">
        <span class="into span1"></span>
        <span class="into span2"></span>
        <span class="into span3"></span>
    </div>



    
    
    </div>


</body>

</html>

运行结果：

图片描述

总结：

精灵图可以通过浮动加背景图片来实现
精灵图也可以通过ul也可以实现主要是后期的定位移动。

weixin_34418883

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css--图片整合（精灵图）

图片整合（精灵图）精灵图的优点：减少图片的字节减少了网页的http请求，从而大大的提高了页面的性能解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便...
复制链接

扫一扫

css--图片整合（精灵图）

图片整合（精灵图）

精灵图的优点：

通用代码如下：

运行结果：

总结：

“相关推荐”对你有帮助么？