什么是css sprites,如何使用?
生活随笔
收集整理的這篇文章主要介紹了
什么是css sprites,如何使用?
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
css sprites:精靈圖(雪碧圖):把一堆小圖片整合在一張大圖上,通過背景圖片相關(guān)設(shè)置(背景圖片、背景圖是否重復(fù)、背景圖定位),顯示圖片,減輕服務(wù)器對圖片的請求數(shù)量
優(yōu)點(diǎn):
1、減少網(wǎng)頁的HTTP請求,提高頁面性能
2、圖片命名上的困擾
3、更換風(fēng)格方便
缺點(diǎn):
1、必須限定容器大小,符合背景圖片元素的位置,需要計(jì)算
2、維護(hù)比較麻煩
使用步驟:
1、制作一張具有多狀態(tài)的拼合圖片,需要按照一定規(guī)律處理
2、給要顯示背景的盒(一個(gè)固定尺寸,寬width、高h(yuǎn)eight),以背景的方式加載,讓其局部顯示
3、通過背景圖定位(background-position)控制不同的顯示狀態(tài)
本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=h1b210j&title=什么是css sprites,如何使用?
總結(jié)
以上是生活随笔為你收集整理的什么是css sprites,如何使用?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 我对CSS选择器的认识
- 下一篇: canvas学习和滤镜实现