2. 程式人生 > >css sprite，css雪碧圖生成工具V3.0更新

css sprite，css雪碧圖生成工具V3.0更新

阿新 • • 發佈：2019-02-02

V3.0主要改進

1.增加了單獨新增單張圖片以及刪除單張圖片的功能

2.增加了生成.sprite檔案用以儲存雪碧圖資訊

3.增加了開啟.sprite檔案功能

什麼是css sprite

CSS sprite在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

為什麼要用這個工具

1.加快網頁載入速度

瀏覽器接受的同時請求數是10個，如果圖片過多會影響整體的視覺效果，而且對於不穩定的網路頻寬，載入起來更是噩夢，所以把圖片拼接為一張大圖，從而加快載入速度，以及加速頁面渲染

2.後期維護簡單

該工具可以直接通過選擇圖片進行圖片的拼接，當然你也可以自己挪動裡面的圖片，自己去佈局你的雪碧圖，直接生成程式碼，簡單易用

3.開源

csdn下載地址（不要分）

如何使用

1.用ps或者dw把需要的圖片切下來

2.開啟CssSprite.exe

開啟CssSprite.exe檔案

3.開啟圖片

點選左上角按鈕開啟圖片

現在版本中一次只能開啟一種型別的圖片檔案

4. .sprite檔案

此次更新中新增了生成圖片的時候同時生成.sprite檔案的功能，程式中可以通過點選按鈕“開啟.sprite”按鈕，選擇.sprite檔案，還原雪碧圖原檢視

請務必保證.sprite與其中的圖片檔案在同一資料夾內

5.排布圖片

可以選擇上面的最上面按鈕今天橫豎的預設排布，也可以滑鼠選中圖片拖動位置，拖動完成後程式會根據內部圖片的位置生成面積最小的雪碧圖，當然也會改變相應的圖片位置

可以點選+，-號圖片按鈕新增以及刪除圖片，目前只能操作單張的圖片。

6.程式碼生成

在程式中可以生成sass程式碼，以及css程式碼，看自己需要嘛，自己選擇，選中“是否是手機端”的時候會把所有的尺寸除以2，因為手機端往往會設計圖比較大，所以要縮放，建議生成圖片後再複製生成的程式碼

7.儲存雪碧圖

點選“生成雪碧圖”按鈕，程式會預設選中你在第3步的時候開啟圖片的地址，然後點選確定後生成雪碧圖。

生成的同時會生成.sprite檔案

相關推薦

css sprite，css雪碧圖生成工具V3.0更新

V3.0主要改進 1.增加了單獨新增單張圖片以及刪除單張圖片的功能 2.增加了生成.sprite檔案用以儲存雪碧圖資訊 3.增加了開啟.sprite檔案功能 什麼是css sprite CSS sprite在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許

webpack雪碧圖生成

騰訊DeepOcean原創文章：dopro.io/webpack-spr… 前言 在HTTP/2.0還沒有普及的現在，css sprite(雪碧圖)仍是前端工程化中必備的一環，而隨著webpack應用的普及，構建工具切換到webpack後雪碧圖該如何處理呢？ 目標 先說下我們希望達到的效果。 1、需

CSS雪碧圖自動生成軟件

自動生成 position enter 教程 下載地址 com 包含 nbsp round http://www.99css.com/1524/ 包含詳細的下載地址、下載步驟以及使用教程 亮點：自動合成雪碧圖+自動生成雪碧圖background-position代碼CS

css Sprite雪碧圖

分享圖片 gpo position img Y軸 spa bsp 需要 圖片 一原理： 其實原理很簡單，就是使用background-position在一張大圖中定位裁剪出我們需要的一個部分，然後用這個部分當作單個的圖片使用。 background-position(x,y

使用雪碧圖Css Sprite精靈 | 加速網頁響應速度

網頁遊戲 block dex top 提高 更換 cee left span 什麽是CSS Sprite精靈？ 是用於前端的一種圖片應用技術，通常情況，我們的開發的網頁或許有很多張圖片，假如在一個頁面上有50多張小圖片，這意味著瀏覽器要逐個下載50張圖片。Css Sprit

Css Sprite(雪碧圖、精靈圖)<圖像拼合技術>

art url rep too ack line posit tps 使用場景 一、精靈圖使用場景： 二、Css Sprite（優點） 減少圖片的字節。 減少網頁的http請求，從而大大的提高頁面的性能。 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名

使用雪碧圖（CSS sprite）

CSS雪碧 即CSS Sprites，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。 使用雪碧圖的優點有以下幾點： 將多張圖片合併到一張圖片中，可以減小圖片的總大小 將多張圖片合併到一

CSS Sprite雪碧圖的應用

CSS雪碧圖，即CSS Sprite，也有人叫它CSS精靈圖，是一種影象拼合技術。該方法是將多個小圖示和背景影象合併到一張圖片上，然後利用CSS的背景定位來顯示需要顯示的圖片部分。 雪碧圖的使用場景 靜態圖片，不隨使用者資訊的變化而變化。 小圖片，容量比

css圖片整合技術的概念及優缺點（雪碧圖，精靈圖，滑動門技術）

一、圖片整合的概念     將多張圖整合到一張背景圖中，使用background-position 來實現圖片的定位的技術叫圖片整合技術，也稱雪碧圖，精靈圖，滑動門技術。 二、優勢     1.將多張圖整合到一張圖中，減少了對伺服器的請求，加快了圖片的載入速度，從而

雪碧圖 CSS sprite 優化效能

雪碧圖 是利用css 的一種圖片合成技術， 它使用的主要是background 和background-position 兩個屬性，調整背景圖片的位置，在不同的地方顯示不同的圖片。 雪碧圖最常應用於網頁中的一系列圖示，logo等，當一個頁面中的圖示數量很多時，我們可以考慮將

css雪碧圖（css splite）

背景圖片 images com 很多 一起 .cn 長時間 http請求 技術 將很多小的背景圖片放在一起，可以減少http請求. 這些圖片通常是一類的。 所以使用雪碧圖. 雪碧圖即為: 測試一下減少了多長時間 0 = 0css雪碧圖（css s

CSS Sprites ——雪碧圖的使用方法

詳細 windows .com order 生成 編寫 解釋 adding 方法 首先解釋下CSS Sprites是什麽：有稱CSS精靈，有稱CSS雪碧的，無論叫什麽，他的作用就是把網頁上很多小圖標放到一張圖片裏面，然後通過CSS裏面的background-position

把所有的小圖標一起做成雪碧圖吧 請用gulp-css-spriter.

font 之前 key tle 簡單 mono padding number ont 用gulp-css-spriter很簡單。 第一步: 在某個文件夾用shitf+鼠標右鍵 第二步: npm install gulp-css-spriter https:/

精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術

精靈圖 精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術 原理:將多張單一的圖片整合到一張圖上，以背景引入,並使用background-position調整背景位置，使之顯示不同圖片 目的:降低瀏覽器向伺服器的請求次數,提高網頁載入速度 優點:降低請求次數,多張圖整合成一張降低整

Tool-生成雪碧圖（sprite）

前言 網站開發時，我們會使用會多小圖示，很多小圖示的呼叫一直都是個問題。 小圖示使用方法 圖示字型（例如:阿里出品的iconfont）雪碧圖（CSS Sprite）等等... 雪碧圖（CSS雪碧） CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CS

雪碧圖----gwc.css/gwc.html

gwc.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>gwc</title> <link href=

background-position和雪碧圖(CSS Sprites)用法

       background-position屬性使用頻率非常高，大量的網站為了減少http請求數，會將大量的圖片圖片合成一張雪碧圖（Sprite）來使用。雪碧圖的使用就是通過控制background-position屬性值來確定圖片呈現的位置，不得不說它

【css】background-position陷阱與移動端雪碧圖處理

前言：大家肯定都試過給元素新增背景background，並且用的絕對不少，但是其中的background-position，你真的瞭解嗎？我們往往要把頁面的中的眾多圖示合併成一張雪碧圖，已減少對伺服器的

CSS Sprites（CSS雪碧圖）利用background-position從大圖中扣出小圖

CSS Sprites技術被國內一些人稱為CSS雪碧圖，其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，backg

多個圖標圖片（雪碧圖）使用CSS樣式顯示

並發 瀏覽器 下載 頁面 方法 icons 就是 rep 樣式 現在的網頁中顯示很多圖標算是常態，發現項目中頁面上用到的圖標都是單個圖標單個文件，用的時候直接往頁面上掛，這確實很常態。 如果，網站是掛在外網上，或者網速過低，又大量使用圖標的情況下，由於瀏覽器和服務器的並發