Css Sprite(雪碧图、精灵图)<图像拼合技术>

zhigoo 发布于2019-04-23 13:31 / 3126人阅读

摘要：一精灵图使用场景二优点减少图片的字节。减少网页的请求，从而大大的提高页面的性能。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

一、精灵图使用场景：

二、Css Sprite（优点）

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

三、实现原理

css background-position

控制一个层可显示的区域范围大小，
通过一个窗口进行背景图的滑动
实例：

代码如下：



    
        "utf-8"/>
        <span class="hljs-built_in">background-<span class="hljs-built_in">position<
        "stylesheet" href="index.css"/>
    
    
        class="oo span1">
        class="oo span2">
        class="oo span3">
        class="pp span4">
        class="ll span5"> 
        class="hh span6"> 
        
    

.body{
    margin:0 auto;
    text-align:center;
}
.oo{
    display:block;
    width:43px;
    height:44px;
    background:url(images/img_navsprites_hover.gif) no-repeat;
    margin:20px auto;
}
.span1{
    background-position:0 0;
    position:absolute;
    top:0px;
}
.span2{
    background-position:-47px 0;
    position:absolute;
    top:0px;
    left:60px;
}
.span3{
    background-position:-94px 0;
    position:absolute;
    top:0px;
    left:120px;
}
.span1:hover{
    background-position:0 -45px;
}
.span2:hover{
    background-position:-47px -45px;
}
.span3:hover{
    background-position:-94px -45px;
}
.pp{
    display:block;
    width:38px;
    height:38px;
    background:url(images/pwd-icons-new.png) no-repeat;
    margin:20px auto;
}
.span4{
    background-position:-48px -96px;
}
.ll{
    display:block;
    width:24px;
    height:26px;
    background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
    margin:20px auto;
}
.span5{
    background-position:0 -483px;
}
.hh{
    display:block;
    width:18px;
    height:18px;
    background:url(images/toolbars.png) no-repeat;
    margin:20px auto;
}
.span6{
    background-position:-95px -211px;
}

**background-position:npx npx;
（第一个值是调左右的，当你需要将背景图向右调的时候用正值，向左则为负值同理将背景图上下调动的时候上是用负值，下是正值）**
<2>效果图如下：
（这是原图）

（这是选完以后的图）

第一幅图是原图与暗图的转换；选了第二幅图的锁；第四幅图的火车；第五幅图的小人。

刚入前端写的不好见谅！！！(^o^)/~

专线服务云服务器雪碧图 html使用雪碧图 html 精灵图 html精灵图引入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1992.html

Css Sprite(雪碧图、精灵图)<图像拼合技术>

摘要：一精灵图使用场景二优点减少图片的字节。减少网页的请求，从而大大的提高页面的性能。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。一、精灵图使用场景： showImg(https://segmentfault.com/img/bVbd4Ex?w=927&h=389); 二、Css Sprite（优点）减...

Youngs 2019-08-02 10:59 评论0 收藏0
Css Sprite(雪碧图、精灵图)<图像拼合技术>

摘要：一精灵图使用场景二优点减少图片的字节。减少网页的请求，从而大大的提高页面的性能。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。一、精灵图使用场景： showImg(https://segmentfault.com/img/bVbd4Ex?w=927&h=389); 二、Css Sprite（优点）减...

n7then 2019-08-30 15:54 评论0 收藏0
CSS Sprite雪碧图的应用

摘要：雪碧图的使用场景静态图片，不随用户信息的变化而变化。使用使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。以上面的雪碧图为例实际雪碧图中各个小图片的起始位置和上面的展示图不同用一个来阐述它的使用方法。 CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 s...

verano 2019-08-02 11:51 评论0 收藏0
CSS Sprite雪碧图的应用

摘要：雪碧图的使用场景静态图片，不随用户信息的变化而变化。使用使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。以上面的雪碧图为例实际雪碧图中各个小图片的起始位置和上面的展示图不同用一个来阐述它的使用方法。 CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 s...

Galence 2019-08-29 17:07 评论0 收藏0
使用compass自动合并css雪碧图(css sprite)

摘要：使用雪碧图，能够减少页面的请求数降低图片占用的字节，以此来达到提升页面访问速度的目的。也正是因为这一点，导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但...

刘永祥 2019-08-28 18:06 评论0 收藏0