雪碧图（精灵图）
在網(wǎng)頁中使用雪碧圖的目的主要是為了優(yōu)化頁面性能，因為頁面中每一張圖片都需要提交一次HTTP請求，當(dāng)圖片過多的時候會使得加載量過大，然后給頁面的加載造成負(fù)擔(dān)，甚至出現(xiàn)卡頓的現(xiàn)象
?
雪碧圖的應(yīng)用場景：
（1）一般來說小的圖標(biāo)是要合成雪碧圖的；
（2）一些大圖片或者動態(tài)加載的圖片不適合使用精靈圖，
?
雪碧圖的實現(xiàn)原理：
（1）需要一個設(shè)置好寬高的容器，將雪碧圖作為background
（2）通過設(shè)置background-position的值來移動圖片的位置
?
優(yōu)缺點：
優(yōu)點是減少http請求的次數(shù)，緩解了請求壓力；缺點是小圖標(biāo)在高清屏上可能會失真，另外平凡定位會占用較多的CPU。
?
例子如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>雪碧圖</title></head><style>h3,ul {margin: 0;padding: 0;}ul {list-style: none;}li h3 {font-size: 14px;font-weight: 400px;}li {display: block;height: 40px;line-height: 45px;overflow: hidden;}.LOGO {width:160px;background: #f8f8f8;}li i {background: url(img/sprite.PNG);display: inline;width: 55px;height: 65px;float: left;margin: 3px 10px 0 0;}.logo-1 i{background-position: 0 -5px;}.logo-2 i{background-position: 0 -49px;}.logo-3 i{background-position: 0 -92px;}.logo-4 i{background-position: -75px -3px;}.logo-5 i{background-position: -75px -50px;}.logo-6 i{background-position: -74px -142px;}.logo-7 i{background-position: -78px -185px;}.logo-8 i{background-position: -77px -230px;}</style><body><div class="LOGO"><ul><li class="logo-1"><i></i><h3>服裝內(nèi)衣</h3></li><li class="logo-2"><i></i><h3>鞋包配飾</h3></li><li class="logo-3"><i></i><h3>運動戶外</h3></li><li class="logo-4"><i></i><h3>居家飾品</h3></li><li class="logo-5"><i></i><h3>居家家具</h3></li><li class="logo-6"><i></i><h3>愛上喝水</h3></li><li class="logo-7"><i></i><h3>私家車</h3></li><li class="logo-8"><i></i><h3>樂器類</h3></li></ul></div></body> </html>合成的雪碧圖以及最終效果：
? ? ? ? ? ? ? ?
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/11281354.html
總結(jié)
- 上一篇： （重要）java都是值传递，与对象形参所
- 下一篇： j函数 判断以 什么开头