關(guān)于Sprites的一些理解

Martin91 發(fā)布于2019-08-01 18:39 / 1252人閱讀

摘要：今天做測試，遇到一道選擇題。通過查找資料得知，也叫雪碧圖，將網(wǎng)頁中的多個(gè)小圖標(biāo)，集合到一整張圖中。的優(yōu)點(diǎn)有減少網(wǎng)頁的請求，大大提高網(wǎng)頁的性能。將多張圖片拼成一張，可減少字節(jié)。命名方便，一次命名多次使用。的缺點(diǎn)有開發(fā)繁瑣。

今天做測試，遇到一道選擇題。

瞬間一臉懵逼，sprites是什么？
通過對各選項(xiàng)的分析，大致明白了幾點(diǎn)：1、它是css屬性。2、它與圖片有關(guān)。3、它是背景圖片。
然后就選了一個(gè)大概不靠譜的，成功的選錯(cuò)了。

通過查找資料得知，CSS Sprites 也叫雪碧（Sprite）圖，將網(wǎng)頁中的多個(gè)小圖標(biāo)，集合到一整張圖中。
一般命名為“icon.png”，比如下圖所示。

使用時(shí)，給元素背景插入這張圖片，然后通過 background-position 來控制就好了。

background: url(icon.png) no-repeat;

.ul i-1{background-position: 0px 0px;}
.ul i-2{background-position: -30px 0px;}
.ul i-3{background-position: -30px -30px;}
.ul i-4{background-position: 0px -30px;}

這下就明白了，Sprites就是我們平常用的icon圖片集合圖。

Sprites的優(yōu)點(diǎn)有：
1、減少網(wǎng)頁的http請求，大大提高網(wǎng)頁的性能。
2、將多張圖片拼成一張，可減少字節(jié)。提高網(wǎng)頁加載速度。
3、命名方便，一次命名多次使用。

Sprites的缺點(diǎn)有：
1、開發(fā)繁瑣。
2、后期維護(hù)麻煩。（體驗(yàn)過的都知道）

GPU云服務(wù)器云服務(wù)器 java的一些代碼深度學(xué)習(xí)的一些應(yīng)用 php實(shí)用的一些代碼數(shù)據(jù)分析的一些方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51916.html

相關(guān)文章

關(guān)于Sprites的一些理解

摘要：今天做測試，遇到一道選擇題。通過查找資料得知，也叫雪碧圖，將網(wǎng)頁中的多個(gè)小圖標(biāo)，集合到一整張圖中。的優(yōu)點(diǎn)有減少網(wǎng)頁的請求，大大提高網(wǎng)頁的性能。將多張圖片拼成一張，可減少字節(jié)。命名方便，一次命名多次使用。的缺點(diǎn)有開發(fā)繁瑣。今天做測試，遇到一道選擇題。 showImg(https://segmentfault.com/img/bV4Jwh?w=739&h=396); 瞬間一臉懵逼，spr...

el09xccxy 2019-08-30 14:04 評論0 收藏0
你知道SVG Sprites是什么嗎，還在用css sprite就太low了

摘要：它是基于，由聯(lián)盟進(jìn)行開發(fā)的。是一種采用來描述二維圖形的語言這個(gè)大家都知道，那么元素是什么呢單純翻譯的話，是符號的意思，然我的理解是元素用來定義一個(gè)圖形模板對象，它可以用一個(gè)元素實(shí)例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官——蘇南(South·Su)，...

fevin 2019-08-30 15:54 評論0 收藏0
Python+Pygame怎么實(shí)現(xiàn)吃豆豆游戲？

　　小編寫這篇文章的一個(gè)主要目的，主要是用來給大家去做個(gè)相關(guān)的介紹，介紹的內(nèi)容主要是涉及到相關(guān)的游戲?qū)崿F(xiàn)，比如怎么去做游戲呢？比如說，怎么去做打豆豆的游戲呢？關(guān)于這方面的內(nèi)容，下面就給大家詳細(xì)解答下?！　⌒蜓浴　∏疤焱砩希嫫鹆嗽谖覀兊膶W(xué)生時(shí)代經(jīng)常玩的一些游戲，吃豆豆，但是我發(fā)現(xiàn)，在一局游戲當(dāng)中，我們命的條數(shù)是比較少的，我根本不能吃完所有的豆豆，總是被敵人吃掉　　于是，我在想怎么能夠保證我達(dá)到吃完...

89542767 2022-12-26 16:58 評論0 收藏0
CSS學(xué)習(xí)（二）：背景圖片如何定位？

摘要：我們都知道屬性用來指定背景圖片應(yīng)該出現(xiàn)的位置，可以使用關(guān)鍵字絕對值和相對值進(jìn)行指定。使用相對值時(shí)，定位方式直觀上不好理解。但應(yīng)清楚，最基本的方法是根據(jù)絕對值定位。上圖經(jīng)過計(jì)算，背景圖片左上角被定位在處，故背景圖片被切除一半。我們都知道background-position屬性用來指定背景圖片應(yīng)該出現(xiàn)的位置，可以使用關(guān)鍵字、絕對值和相對值進(jìn)行指定。在CSS Sprites中，這個(gè)屬性使...

winterdawn 2019-08-30 15:54 評論0 收藏0
2017年五月前端面試題目的總結(jié)

摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面?，F(xiàn)將我在面試過程遇到的問題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來。持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對經(jīng)驗(yàn)和細(xì)節(jié)...

warkiz 2019-08-20 17:30 評論0 收藏0