精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術
精靈圖
精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術
原理:將多張單一的圖片整合到一張圖上,以背景引入,並使用background-position調整背景位置,使之顯示不同圖片
目的:降低瀏覽器向伺服器的請求次數,提高網頁載入速度
優點:降低請求次數,多張圖整合成一張降低整體大小,整改一張圖使得整體風格主題改變,提高維護性
缺點:自適應佈局難控制,製作繁瑣,不合理的整合圖片會導致呼叫混亂,一張圖更改導致整體變化(牽一髮動全身)
<div class="sprites"></div>
.sprites:before{ content: ""; display: block; width: 17px; height: 17px; background: #999; background-image: url(img/sprites1.png); background-repeat: no-repeat; background-position: 0 -118px; }
PS:借用360導航頁的精靈圖。
宣告:若有侵權等問題請聯絡作者,定當及時改正、致歉和刪除有問題的文章!
相關推薦
精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術
精靈圖 精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術 原理:將多張單一的圖片整合到一張圖上,以背景引入,並使用background-position調整背景位置,使之顯示不同圖片 目的:降低瀏覽器向伺服器的請求次數,提高網頁載入速度 優點:降低請求次數,多張圖整合成一張降低整
css圖片整合技術的概念及優缺點(雪碧圖,精靈圖,滑動門技術)
一、圖片整合的概念 將多張圖整合到一張背景圖中,使用background-position 來實現圖片的定位的技術叫圖片整合技術,也稱雪碧圖,精靈圖,滑動門技術。 二、優勢 1.將多張圖整合到一張圖中,減少了對伺服器的請求,加快了圖片的載入速度,從而
CSS Sprites ——雪碧圖的使用方法
詳細 windows .com order 生成 編寫 解釋 adding 方法 首先解釋下CSS Sprites是什麽:有稱CSS精靈,有稱CSS雪碧的,無論叫什麽,他的作用就是把網頁上很多小圖標放到一張圖片裏面,然後通過CSS裏面的background-position
css sprites(CSS 精靈):如何獲取一張整合拼合圖片上的其他圖片
今天去國美網站訪問的時候發現了很多張圖片合成了一張圖片,我就在想那我們怎麼能獲得每一個細小圖示的引用呢? 後來我看到了css sprite。根據百度資料上說:CSS sprites很多國內的人都叫cs
background-position和雪碧圖(CSS Sprites)用法
background-position屬性使用頻率非常高,大量的網站為了減少http請求數,會將大量的圖片圖片合成一張雪碧圖(Sprite)來使用。雪碧圖的使用就是通過控制background-position屬性值來確定圖片呈現的位置,不得不說它
CSS Sprites(CSS雪碧圖)利用background-position從大圖中扣出小圖
CSS Sprites技術被國內一些人稱為CSS雪碧圖,其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,backg
css學習_css精靈技術、字體圖標
src 原來 image 字體 請求 alt inf 分享圖片 追加 1、精靈技術產生的背景(減少向服務器請求的次數,減小服務器壓力) 2、精靈技術的本質(小的背景圖集中在一張大圖上) 3、精靈技術的使用 案例1: 案例2: 註意:產品類的圖片一
每天一個JS 小demo之韓雪冬輪播圖。主要知識點:html,css布局,對於數組和對象的理解和運用
身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st
把所有的小圖標一起做成雪碧圖吧 請用gulp-css-spriter.
font 之前 key tle 簡單 mono padding number ont 用gulp-css-spriter很簡單。 第一步: 在某個文件夾用shitf+鼠標右鍵 第二步: npm install gulp-css-spriter https:/
CSS之"精靈技術"
文章目錄 精靈技術產生的背景 精靈技術本質 精靈技術的使用 製作精靈圖 精靈技術產生的背景 當用戶訪問一個網站時,需要向伺服器傳送請求,網頁上的每張影象都要經過一次請求才能展現給使用者。 然而,一個網頁中
Web優化 --利用css sprites降低圖片請求
term idt 有變 可讀性 坐標定位 name 單位 分批 rect sprites是鬼怪,小妖精,調皮鬼的意思,初聽這個高端洋氣的名字我被震懾住了,一步步掀開其面紗後發覺非常easy的東西。作用卻非常大 什麽是CSS Sprites C
CSS Sprites樣式生成工具的使用
img www 麻煩 學習 圖片文件 必備 分辨率 是把 .html 今天寫css的時候看到有一個實戰視頻的老師用了這個,覺得挺好就學習使用了一下,下面是一些簡單介紹: 軟件介紹 : CSS Sprites樣式生成工具,網頁設計師必備利器。CSS Sprites其實就是
前端性能優化------------圖片處理Css Sprites&Base64
大於 字符 ebp 錯誤 過程 inf 嵌入 定位 性能 Css Sprites Css Sprites我們叫做雪碧圖或者css精靈,其原理就是將許多小的圖片合到一張大的圖片中,然後使用background-image引用圖片,使用background-position來定
使用CSS實現圈人效果(CSS Sprites)
我最早了解到”圖片合併”技術, 應該是在大學遊戲時代, 會發現很多遊戲圖示, 都會合並在一個位圖中, 然後使用類似”遮罩”的技術來分別顯示各種圖示. 第一次使用CSS Sprites技術的時候, 其實並不知道它的這個名字, 也並沒覺得多稀奇,就是個遮罩麼. 今天玩開心網的圈人遊戲時
CSS Sprites線上生成器(步驟詳解)
一款優秀的主題,不僅僅需要美觀的設計,還需要最大的各項優化,最大可能地優化主題中用到的圖片,也就變得十分重要,使用CSS Sprites技術是比較常見的手段,很多優秀的主題都很注重這一點。倡萌在製作WordPress主題時,也儘可能在這方面做最大的優化,當然了,倡萌技術不
CSS Sprites製作導航懸浮高亮各方案比較
只使用一張CSS Sprites圖片,製作導航選單背景,滑鼠懸浮高亮(其實就是切換背景圖)。 由於各瀏覽器目前對“background-position-x”這種“不規範”的css屬性支援程度不一,於是派生出多種實現方案。 方案一: <style type="te
css sprites將多張圖片合併成一張
div,ul,li,h3{margin:0; padding:0;} ul,li{list-style:none;} div{margin:50px; float:left; font-size:12px; width:200px; background:#eee;} h3{height:28px; li
mini-css-extract-plugin的背景圖的解決方法及css資料夾
今天看了一下npm官網發現webpack4.x的mini-css-extract-plugin已經可以宰了,然後Dome走起;首先看一下官網給出的栗子:const MiniCssExtractPlugin = require("mini-css-extract-plu
js+css中的clip進行的簡單的縮圖裁剪
對於很多網站來說,都希望縮圖是統一的長寬比例,這樣比較方便前臺顯示。但是如果前臺採用瀑布流或者自動排布框架來做的首頁,這樣就失去了一種美觀性。 這時候我們就考慮,如何做到同一張縮圖,模組或者內頁中用統一的長寬比顯示,而首頁用原比例顯示
CSS學習筆記05 CSS display屬性
嵌套 img ges htm 現在 inline 內聯元素 itl 註意 HTML標記一般分為塊標記和行內標記兩種類型,它們也稱塊元素和行內元素。 塊元素 每個塊元素通常都會獨自占據一整行或多整行,可以對其設置寬度、高度、對齊等屬性,常用於網頁布局和網頁結構的搭建。並且