html中精灵图的使⽤⽅法,csssprites（精灵图）如何使⽤？CSS Sprites是⼀种性能优化技术，⼀种⽹页图⽚应⽤处理⽅式：将多个图像组合成单个图像⽂件以在⽹站上使⽤的⽅法，以提⾼性能；也被称为css 精灵图。
⽹页通常包含多个图像。这些包括图标，按钮，徽标，相关图⽚和其他图形。当页⾯中加载图像时，浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调⽤HTTP服务器，这可能导致下载时间变慢以及带宽使⽤率过⾼。css中的position属性
CSS Sprites会将多个图像组合成⼀个称为精灵表或拼贴图的单个图像，⽤户不下载多个⽂件，⽽是下载单个⽂件并通过偏移⽂件显⽰必要的图像(或精灵图)。
这样可以减少对服务器的调⽤、减少呈现⽹页所需的下载次数，节省带宽并缩短⽤户端的下载时间，减少⽹络拥塞。
如何使⽤CSS Sprites(精灵图)？
因为CSS Sprites是⼀张多个图像组合成单个图像，在精灵表中多个图像会被放置在⽹格状图案⾥，呈现⽹状分布。
当需要特定图像(精灵图)时，可以通过CSS background背景定位技术技巧布局⽹页背景。在需要⽤到图
⽚的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图⽚的显⽰。
了解了background-position属性的⽤法，使⽤精灵图之前，我们需要知道精灵图中各个图标的位置。
从上⾯的图⽚不难看出Sprites(精灵图)中各个⼩图标(icon)在整张Sprites(精灵图)的起始位置，例如第⼀个图标(裙⼦)在精灵图的起始位置为 x：0，y：0，第⼆个图标(鞋⼦)在精灵图的起始位置为 x：0，y：50px，第三个图标(⾜球)在精灵图的起始位置为x：0，y：100px，依次类推可以得出各个图⽚相对于精灵图的起始位置。
以上⾯的Sprites(精灵图)为例(实际精灵图中各个⼩图⽚的起始位置和上⾯的展⽰图不同)⽤⼀个Demo来阐述它的使⽤⽅法。
HTML
CSS
600px;
height:300px;
border: 3px solid #ccc;
background-color: #8064A2;
}
span {
display: inline-block;
25px;
height: 25px;
border: 3px solid #ccc;
background-image: url(css/img/sidebar.png); background-repeat: no-repeat;
margin: 5px;
}
.icon1 {
background-position: 0 0;
}
.icon2 {
background-position: -40px 0;
}
.
icon3 {
background-position: 0 -25px;
}
.icon4 {
background-position: -40px -25px;
}
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。