當前位置：
首頁 >
雪碧图（精灵图）
發布時間：2025/4/14
51
豆豆
在網頁中使用雪碧圖的目的主要是為了優化頁面性能，因為頁面中每一張圖片都需要提交一次HTTP請求，當圖片過多的時候會使得加載量過大，然后給頁面的加載造成負擔，甚至出現卡頓的現象
?
雪碧圖的應用場景：
（1）一般來說小的圖標是要合成雪碧圖的；
（2）一些大圖片或者動態加載的圖片不適合使用精靈圖，
?
雪碧圖的實現原理：
（1）需要一個設置好寬高的容器，將雪碧圖作為background
（2）通過設置background-position的值來移動圖片的位置
?
優缺點：
優點是減少http請求的次數，緩解了請求壓力；缺點是小圖標在高清屏上可能會失真，另外平凡定位會占用較多的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>服裝內衣</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>合成的雪碧圖以及最終效果：
? ? ? ? ? ? ? ?
?
轉載于:https://www.cnblogs.com/xiaoan0705/p/11281354.html
總結
- 上一篇： （重要）java都是值传递，与对象形参所
- 下一篇： j函数 判断以 什么开头