資訊專(zhuān)欄INFORMATION COLUMN
摘要：精靈圖雪碧圖把一堆小圖片整合在一張大圖上，通過(guò)背景圖片相關(guān)設(shè)置背景圖片背景圖是否重復(fù)背景圖定位，顯示圖片，減輕服務(wù)器對(duì)圖片的請(qǐng)求數(shù)量?jī)?yōu)點(diǎn)減少網(wǎng)頁(yè)的請(qǐng)求，提高頁(yè)面性能圖片命名上的困擾更換風(fēng)格方便缺點(diǎn)必須限定容器大小，符合背景圖片元素的位置，需
css sprites：精靈圖（雪碧圖）：把一堆小圖片整合在一張大圖上，通過(guò)背景圖片相關(guān)設(shè)置（背景圖片、背景圖是否重復(fù)、背景圖定位），顯示圖片，減輕服務(wù)器對(duì)圖片的請(qǐng)求數(shù)量
優(yōu)點(diǎn)：
1、減少網(wǎng)頁(yè)的HTTP請(qǐng)求，提高頁(yè)面性能
2、圖片命名上的困擾
3、更換風(fēng)格方便
缺點(diǎn)：
1、必須限定容器大小，符合背景圖片元素的位置，需要計(jì)算
2、維護(hù)比較麻煩
使用步驟：
1、制作一張具有多狀態(tài)的拼合圖片，需要按照一定規(guī)律處理
2、給要顯示背景的盒（一個(gè)固定尺寸，寬width、高h(yuǎn)eight），以背景的方式加載，讓其局部顯示
3、通過(guò)背景圖定位（background-position）控制不同的顯示狀態(tài)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1905.html
摘要：它是基于，由聯(lián)盟進(jìn)行開(kāi)發(fā)的。是一種采用來(lái)描述二維圖形的語(yǔ)言這個(gè)大家都知道，那么元素是什么呢單純翻譯的話，是符號(hào)的意思，然我的理解是元素用來(lái)定義一個(gè)圖形模板對(duì)象，它可以用一個(gè)元素實(shí)例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官——蘇南(South·Su)，...
摘要：以上，從分層組織，模塊化，使用時(shí)注意低權(quán)重原則，以及巧用雪碧圖闡述了提高代碼質(zhì)量的四個(gè)方面。編寫(xiě)高質(zhì)量代碼前端開(kāi)發(fā)修煉之道曹劉陽(yáng) 分層組織CSS 我們應(yīng)用CSS的能力應(yīng)該分成兩部分：一部分是CSS的API，重點(diǎn)是如何用CSS控制頁(yè)面內(nèi)元素的樣式；另一部分是CSS框架，重點(diǎn)是如何對(duì)CSS進(jìn)行組織。 推薦一種組織CSS的方法： base.css + common.css + page.c...
摘要：編寫(xiě)配置文件，以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦，是因?yàn)榉浅５撵`活，看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫(xiě)對(duì)應(yīng)的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 網(wǎng)站開(kāi)發(fā)90%會(huì)用到小圖標(biāo)， 多小圖標(biāo)調(diào)用顯示是前端開(kāi)發(fā)常見(jiàn)的問(wèn)題；目前小圖標(biāo)顯示常見(jiàn)有兩種方式...
摘要：什么是打開(kāi)一些網(wǎng)站可以看到每張圖片相應(yīng)需要請(qǐng)求一次后臺(tái)，如下圖請(qǐng)求是比較消耗資源的，當(dāng)網(wǎng)站中存在較多的請(qǐng)求時(shí)，性能就會(huì)相應(yīng)的降低，加載就會(huì)變慢，甚至卡住。減少請(qǐng)求能提高性能，就是通過(guò)合并多張圖片達(dá)到減少請(qǐng)求目的的一種技術(shù)。 什么是css sprites? 打開(kāi)一些網(wǎng)站可以看到每張圖片相應(yīng)需要請(qǐng)求一次后臺(tái)，如下圖： showImg(http://segmentfault.co...
閱讀 1834·2021-11-24 09:39
閱讀 2302·2021-09-30 09:47
閱讀 4170·2021-09-22 15:57
閱讀 1888·2019-08-29 18:36
閱讀 3590·2019-08-29 12:21
閱讀 599·2019-08-29 12:17
閱讀 1276·2019-08-29 11:25
閱讀 734·2019-08-28 18:26
