關于Sprites的一些理解

Martin91 發布于2019-08-01 18:39 / 1230人閱讀

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

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

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

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

使用時，給元素背景插入這張圖片，然后通過 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的優點有：
1、減少網頁的http請求，大大提高網頁的性能。
2、將多張圖片拼成一張，可減少字節。提高網頁加載速度。
3、命名方便，一次命名多次使用。

Sprites的缺點有：
1、開發繁瑣。
2、后期維護麻煩。（體驗過的都知道）

GPU云服務器云服務器 java的一些代碼深度學習的一些應用 php實用的一些代碼數據分析的一些方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51916.html

關于Sprites的一些理解

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

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

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

fevin 2019-08-30 15:54 評論0 收藏0
Python+Pygame怎么實現吃豆豆游戲？

　　小編寫這篇文章的一個主要目的，主要是用來給大家去做個相關的介紹，介紹的內容主要是涉及到相關的游戲實現，比如怎么去做游戲呢？比如說，怎么去做打豆豆的游戲呢？關于這方面的內容，下面就給大家詳細解答下。　　序言　　前天晚上，玩起了在我們的學生時代經常玩的一些游戲，吃豆豆，但是我發現，在一局游戲當中，我們命的條數是比較少的，我根本不能吃完所有的豆豆，總是被敵人吃掉　　于是，我在想怎么能夠保證我達到吃完...

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

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

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

摘要：持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是大公司可能更偏向一些基礎或者原理布局一些經典算法方面。現將我在面試過程遇到的問題總結下。目前先傳題目答案整理好之后再發布出來。持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是：大公司可能更偏向一些JS基礎或者原理、html布局、一些經典算法方面。小公司的面試更加側重對經驗和細節...

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