Sprite(雪碧图)的应用

Posted 2021-02-13 wangxiaolan

雪碧图是根据CSS sprite音译过来的，是将很多很多的小图标放在一张图片上。

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。

把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

我们来看看实现条件:

       1.要有装图片的容器宽高

       2.引用背景图的文件

       3.精准定位改图(background-position的值（默认为（0，0）)

例如:要使用此图片的第一个为图标,并且鼠标悬停变成第二个红色

html代码:

书写装小图片的容器,我这里用<i>标签

cssd代码:

在css中需要这是该图片的宽高,用Photoshop可以测量,我这里用的是行内元素,要设置宽高需要转块

display: inline-block;

再来引用图片,用background:url(输入路片路径)

background-image: url("../img/icon.png");

由于这小图片就是第一个,所需定位的就是该宽高

完成的效果如下:

 

 

当鼠标悬停时变色

对应刚刚<i>的类名small-icon1施加样式

对应css代码:

当鼠标悬停显示的是红的的小图标则需要定位到红色的位置,那我们 需要测量出X Y轴的位置,0,0为起点,向上移动则x为负数.

效果如下:

 

 想要实现哪一个图片就定位拖的位置,书写代码例,position:-22px -40px;