使用CSS和HTML創建Sprite圖像

我試圖構建一個使用一個大精靈的網頁。我不想在photoshop或某些第三方軟件中編寫精靈，而是使用HTML和CSS來排列圖像，然後將編譯爲單個JPEG。使用CSS和HTML創建Sprite圖像

無論如何要準確地呈現一個HTML頁面爲JPEG？

澄清：基本上，我想使用html和css創建一個網頁，將其渲染爲一個單獨的圖像，然後將該圖像用作不同網頁上的精靈。所以我只是在HTML和CSS中編譯我的「圖像」，而不是在photoshop中構建它。

您的問題很難遵循。考慮重新措辭。 – 2012-07-25 20:10:26

這只是您一次性生成精靈的交易，還是您希望這適用於您的網頁的每個訪問者？ – j08691 2012-07-26 15:10:55

我正在嘗試創建一個模板，以便我可以輕鬆地切換精靈的細節，例如更改一個特定的源圖像。但我使用css樣式，例如邊框半徑和box-shadow在較大sprite中的單個圖像上，因此在photoshop或第三方中執行它非常耗時 – 2012-07-26 15:24:19

是的，它被稱爲打印屏幕。 PrtScr

2012-07-26 15:07:18

現在來吧...打印屏幕將不會準確捕捉尺寸，以便精靈座標（對於JPEG）與原始的CSS座標。 – 2012-07-26 15:17:42

@WilliamSmith：你會得到你的網站的完整圖像，這在精靈中是完全可用的。 – 2012-07-26 15:18:38

@WilliamSmith：如果你的網站很大，那麼Chrome的'Awesome Screenshot'插件可以爲你自動捕捉整個頁面。 – 2012-07-26 15:19:28

回答