css-sprites

3熱度

1回答

沒有大量的吞噬經驗，這可能是我的一個簡單的錯誤，但我一直無法找到一種可以在任何地方在線工作的解決方案...希望堆棧溢出可以救我！我正在嘗試使用節點插件的sprity創建spritesheet和關聯的SASS（.scss）樣式表。 https://www.npmjs.com/package/sprity 我已經安裝了sprity和sprity-sass（以及gulp-sass和其他我已經使用過的）

0熱度

2回答

在列表項使用圖像從精靈的內容後

我有UL下面的HTML： <div id="articlesideitems"> <ul> <li><a href="#">List item content 1 </a></li> <li><a href="#">List item content 2<sp

0熱度

1回答

一些CSS精靈在Firefox，Chrome和IE上不顯示？

我在網站的幾個頁面上使用css-sprites作爲導航按鈕，當圖像懸停時圖像部分變暗。所有這些按鈕上都有文字。在我剛剛將文本寫入圖像之前，事情工作正常，但我想將文本添加到我的html中，以便對放大到頁面的任何人呈現更好的效果。然而，這樣做現在已經導致圖片的精靈不會出現在Firefox，Chrome和IE中（在Safari中仍然可以正常工作）。很顯然，我認爲向代碼添加文本已經造成了這種情況，但現在

0熱度

1回答

如何緩存圖像並稍後在EaselJS中使用它？

我有一個非常基本的精靈動畫。如何緩存圖像並將其用於精靈圖紙創建的「圖像」部分？我試着用： Image1= new Image(2779,1135) Image1.src = "img/contur.png" ，但我不knwo如何將圖像1中的「圖像」部分。 stage = new createjs.Stage（document.getElementById（「testCanvas」））; s

5熱度

2回答

如何以CSS方式動畫（A或B）？

我正在寫一個應用程序的PhoneGap（使用HTML，CSS和JavaScript）和我被困在動畫部分，雖然我用簡單的基本spritesheet動畫。 A）我試圖動畫的基本途徑，但我有2個問題： 1）如果我沒有滿格spritesheet至極我可能沒有，這也顯示空框架，我不知道如何跳過它們而不需要將整個spritesheet轉換成一行。（我聽說你可以以某種方式定義每一幀，但我真的無法找到如何去做，

0熱度

1回答

瀏覽器是否針對不同的圖像寬高比進行了優化？

這個問題可能有一個非常複雜的答案，但這裏有：我已經創建了一些圖像精靈使用天真疊加算法產生的圖像是89px寬2000px高。該圖像將用於頁面上的大約50個精靈。這個精靈的格式是.GIF格式，我幾乎不知道GIF如何編碼像素，（我不知道它是行/列主要還是其他一些打包算法）。精靈圖像中的總像素數爲178,000。我可以改變我的精靈生成算法，以產生一個445像素寬，400高（相同像素數，只是創建一個圖

0熱度

2回答

最佳實踐：在大型Backbone.js應用程序中組織CSS文件，並計算圖像精靈？

我繼承了一個帶有3000行的樣式表的Backbone.js應用程序。我想重構爲多個樣式表，這（也許開始使用像SASS預處理器）。我也想開始爲我的圖片使用CSS精靈，因爲我相信這可以減少整整一兩個載入時間。是否存在將超級CSS文件Backbone.js應用程序拆分爲多個CSS文件的最佳做法？怎麼樣組織我的規則和精靈，以便當我添加一個新的圖像，精靈生成器「優化」精靈的空間佈局，我不必追捕每一個選

1熱度

1回答

使用圖像精靈作爲CSS背景圖像的響應式網格

哇，這比我預期的要難！我們試圖在網格中的響應網站上使用圖像精靈作爲CSS背景圖像。請check out our jsfiddle of the scenario。所以基本上，當這個尺寸被調整時，精靈的背景圖像需要調整大小以適應父容器（）。我已經將背景圖像轉換爲data:image，認爲這將是第一步（儘管我不確定），現在還不能確定如何讓精靈的背景圖像響應。到目前爲止我所嘗試過的

12熱度

2回答

在什麼情況下，使用HTTP/2單獨加載圖像比用HTTP/1.1精靈一次加載所有圖像要慢？

HTTP/2使多路連接成爲可能，消除了與服務器的多個連接。通過單一連接，許多單獨的圖像可以發送到客戶端。這避免了將許多圖像合併爲一個並使用CSS將其分開的舊圖像精靈模式。我很好奇，如果在HTTP/2世界中精靈仍然會更快。如果是這樣，在什麼情況下？

1熱度

1回答

如何將我的精靈圖標放在方形div的中間？

首先這裏是我的sprites.png樣子：其次，我宣佈我精靈類是這樣的： .sprite { background: url('sprites.png') no-repeat; float: left; } 第三，我只需要鉛筆圖標，所以我創建像這樣的鉛筆類： .pencil { background-position: -110px 0px; width: 24px; h