CSS精靈(CSS雪碧技術)
小編簡短的補充一下CSS精靈(也叫CSS雪碧技術)
在實戰中非常使用,使用也多我們不能遺漏。
在一些站中我們經常能看到:(已放入fireworks)
這是京東的小圖示的一個原圖,當然我們在使用這些小圖示時不可能是一個一個很小的圖,一般都是小圖示的一些集合然後在插圖時以定位方式擷取自己所需要的部分。
那麼實際操作非常簡單
我們將圖片放入fireworks時將自己所需要的部分切片切出來讀出寬高,切完後值得我們注意的是這個座標
插入小圖示時我們都是以背景圖進行插入
將盒子高度寬度定義成“精靈”高寬。
那麼在操作上我們在background屬性里加上這個大圖後然後,給一個no repeat 然後給一個-149px -98px 的座標定位這樣我們就能實現精確定位到所需圖片。
很簡單但非常實用需要掌握的一個知識點。
相關推薦
CSS精靈(CSS雪碧技術)
小編簡短的補充一下CSS精靈(也叫CSS雪碧技術) 在實戰中非常使用,使用也多我們不能遺漏。 在一些站中我們經常能看到:(已放入fireworks) 這是京東的小圖示的一個原圖,當然我們在使用這些小圖示時不可能是一個一個很小的圖,一般都是小圖示的一些集合然後在插圖
css圖片整合技術的概念及優缺點(雪碧圖,精靈圖,滑動門技術)
一、圖片整合的概念 將多張圖整合到一張背景圖中,使用background-position 來實現圖片的定位的技術叫圖片整合技術,也稱雪碧圖,精靈圖,滑動門技術。 二、優勢 1.將多張圖整合到一張圖中,減少了對伺服器的請求,加快了圖片的載入速度,從而
CSS Sprites(CSS雪碧圖)利用background-position從大圖中扣出小圖
CSS Sprites技術被國內一些人稱為CSS雪碧圖,其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,backg
多個圖標圖片(雪碧圖)使用CSS樣式顯示
並發 瀏覽器 下載 頁面 方法 icons 就是 rep 樣式 現在的網頁中顯示很多圖標算是常態,發現項目中頁面上用到的圖標都是單個圖標單個文件,用的時候直接往頁面上掛,這確實很常態。 如果,網站是掛在外網上,或者網速過低,又大量使用圖標的情況下,由於瀏覽器和服務器的並發
css sprites(CSS 精靈):如何獲取一張整合拼合圖片上的其他圖片
今天去國美網站訪問的時候發現了很多張圖片合成了一張圖片,我就在想那我們怎麼能獲得每一個細小圖示的引用呢? 後來我看到了css sprite。根據百度資料上說:CSS sprites很多國內的人都叫cs
CSS屬性(字型與文字屬性)
1.字型屬性 (1)font-family 把要對這個網站要設定的字型都寫上,如果這個瀏覽器支援第一個字型,則會用,如果不支援則會嘗試第二個,如果設定的字體系統都不支援則會使用系統預設的字型作為網站的字型 (2)字重( font-weight ) &nbs
瀏覽器工作原理(五):CSS解析(CSS parsing)
還記得簡介中提到的解析的概念嗎,不同於html,css屬於上下文無關文法,可以用前面所描述的解析器來解析。Css規範定義了css的詞法及語法文法。 看一些例子: 每個符號都由正則表示式定義了詞法文法(詞彙表): comment///*[^*]*/*+([^/*][^*]*
使用jquery操作元素的css樣式(獲取、修改等等)
//1、獲取和設定樣式 $("#tow").attr("class")獲取ID為tow的class屬性 $("#two").attr("class","divClass")設定Id為two的class屬性。 //2、追加樣式 $("#two").addClass(
Android:自定義ImageView展示大圖中的指定區域並切圓角(雪碧圖)
@Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (drawable instanceof BitmapDrawable)
JEECG新版UI規劃,主要提供H5方案(采用主流技術)
upload 圖片標題 round lock oschina HR 圖片 htm 圖片說明 JEECG 結合當前主流的UI技術,在新版3.7.4 即將推出新的UI方案,主要采用Bootstrap,Vue技術。同時提供代碼生成器模板(單表、一對多),快速生成你喜好的模
軟體評測師教程簡介(第二篇-測試技術)
軟體評測師是“全國計算機技術與軟體專業技術資格”中級認證,於2018年11月10號考試。 軟體評測師教程有近700頁。主要分為三大部分:第一篇,理論篇;第二篇,測試技術;第三篇,測試案例。 第一篇:理論篇 第一章:軟體測試概論 第二章:軟體測試基礎 第三章:軟體質量
PyCharm使用技巧:TODO(程式碼特殊註釋技術)
PyCharm支援的程式碼特殊註釋包括TODO和FIXME。 TODO: TODO表示這個地方需要實現一些功能,現在還沒來得及做,先做個標記防止遺忘。 FIXME: FIXME表示需要修復的bug,優先順序比較高。 如果程式碼中有太多的TODO和FIXME的話就不好查找
Sparse Virtual Texture (虛擬貼圖技術)
Virtual texture 技術用於解決3D場景中大量貼圖而記憶體有限的情況,它的思想可以參考虛擬記憶體。虛擬記憶體技術中,實體記憶體是有限的,但是虛擬記憶體可以遠遠大於實體記憶體,虛擬記憶體被抽象
如何看懂 史密斯圓圖 (天線與微波技術)
暴受到了史密斯圓圖的吹殘 網上搜集了一些有用的資料 存檔一下 看例項最有用了 &nb
linux-實現nfs(網盤共享技術)
0. 環境說明 nfs服務端系統:CentOS 6.4 x86_64 nfs服務端IP:192.168.4.211 nfs客戶端系統:CentOS 6.4 x86_64 nfs客戶端IP:192.168.4.212 1. 安裝NFS服務端(192.168.4.21
Android硬體之NCF技術(近場通訊技術)
Android硬體之NFC技術 NFC(Near Field Communication,近場通訊),是一種資料傳輸技術。但是,與Wi-Fi、藍芽、紅外線等技術最主要的差異就是有效距離,NFC的
如何成為一名黑客(網路安全從業者)——網路攻擊技術篇(1/8 掃描技術)
大家好,我是Mr.Quark,又和大家見面了,今天我要和大家分享的是網路攻擊技術八篇中的第一篇:掃描技術,在未來的幾天裡,將會陸續釋出其餘部分。希望大家在學習後僅在自己的作業系統或者虛擬機器上實驗,如果你想為別人的計算機做安全測試,請取得授權。喜歡本文的朋友,歡迎轉載。下面進入正題。↓↓↓
開源工具介紹(大資料關鍵技術)
在介紹大資料關鍵技術之前,先給出一張Hadoop大資料應用生態中最主要的元件圖,該圖描述了這些元件的地位,以及它們之間的相互關係。圖1.Hadoop大資料應用生態元件及其關係HDFS(Hadoop分散式檔案系統) HDFS是Hadoop體系中資料儲存管理
css雪碧圖(css splite)
背景圖片 images com 很多 一起 .cn 長時間 http請求 技術 將很多小的背景圖片放在一起,可以減少http請求. 這些圖片通常是一類的。 所以使用雪碧圖. 雪碧圖即為: 測試一下減少了多長時間 0 = 0css雪碧圖(css s
Css Sprite(雪碧圖、精靈圖)<圖像拼合技術>
art url rep too ack line posit tps 使用場景 一、精靈圖使用場景: 二、Css Sprite(優點) 減少圖片的字節。 減少網頁的http請求,從而大大的提高頁面的性能。 解決了網頁設計師在圖片命名上的困擾,只需對一張集合的圖片上命名