CSS Sprites重複圖像

我想知道是否有任何方法只使用一個圖像重複和使用css精靈非重複圖像。因此，在這種情況下，我想合併頁面上的所有圖像，無論寬度和高度如何，以及它們是否會用作重複或非重複圖像。我知道標準是使用所有非重複圖像和使用所有重複圖像的另一個圖像創建1個圖像。但我只是想知道我是否可以只用1張圖片來表示一切。CSS Sprites重複圖像

謝謝。

來源

2010-07-28 fhd

簡短答案是「否」。

解釋是重複的圖像會以其重複的方向全部顯示。因此，設置爲repeat-x的背景將顯示水平方向上的所有圖像內容。這就是爲什麼你不能同時使用精靈重複兩個方向。

來源

2010-07-28 19:00:38

最後是正確的答案，這需要在頂部和選擇。對不起，瑞恩放棄了這個線程。 – 2016-01-11 00:02:20

我知道標準是創建使用所有非重複圖像和使用所有重複的圖像的另一圖像1個圖像。

我想你是錯的。選擇性地平鋪一部分圖像是不可能的。您只能整個拼貼圖像。因此，所有重複的圖像都必須存在於自己的圖像文件中。

來源

2010-07-28 19:05:43 advait

沒有我很確定你可以使用精靈重複圖像這是怎麼樣 div background-image：url（sprite8.png）; background-repeat：repeat-y; width：160px; padding：20px; margin：20px; float：left; } 例子： http://www.phpied.com/background-repeat-and-css-sprites/ http://spriteme.org/demo.php – fhd 2010-07-28 19:16:36

可以，事實上，重複圖片使用精靈，但只能水平或垂直（獨佔）。並且圖像必須是相同的高度（垂直）或寬度（水平）才能在相同的文件中。 – 2010-07-28 19:23:25

瑞恩是正確的。您可以將重複圖像捆綁在一個精靈中，一個用於repeat-x，另一個用於重複-y。但是，在這兩種情況下，你都必須分別知道最大寬度和高度。由於我很少想承諾，我經常只是在自己的單獨文件中重複背景。 – 2010-07-28 20:37:04

@Ryan Kinal在他的answer中說，精靈圖像不能用於重複背景圖像（在兩個方向）。

還有一種方法可以在只有一個或兩個文件（而不是圖像）的情況下跨瀏覽器，但它並不那麼簡單，修改起來應該很複雜（雖然精靈的修改也很複雜，但在至少它是可視的！）。

data: base64 encoding現代瀏覽器和IE8 +
MHTML爲IE7及以下（見IE7在Vista上的評論），由斯托揚斯特凡

由於PHPIED文章中指出，內聯重新發現或翻譯圖像重複兩次，但藉助3個條件註釋，您可以將IE7及以下版本與MHTML文件，IE8及更高版本一起使用數據：base 64文件和！IE與相同的數據文件。

你結束了你的服務器上，並通過任何瀏覽器下載5個不同的文件4：

圖像與no-repeat -ing精靈
圖像與repeat-x -ing精靈
圖像與repeat-y -ing精靈
爲MHTML一個文件（應當投放到IE7及以下）的背景圖像
對於相同的重複b A文件但數據編碼爲IE8 +和！IE瀏覽器

大型重複圖像不應編碼爲文件大小可能會增加很多，您的設計可能會有所不同。

來源

2010-07-28 20:09:45 FelipeAls

不幸的是，你不能強制這兩種圖像工作在相同的精靈。通常重複圖像是較大圖像（漸變）的一小部分，可以重複使用以節省加載時間和大小。您可以水平，垂直和兩者重複圖像。
repeat-x,repeat-y或只是repeat。對於精靈上的非重複圖像，需要指定滾動座標，如scroll 60px -20px（60px是左邊座標，-20px是頂部座標）。

來源

2010-07-28 20:47:54

CSS Sprites重複圖像

回答

相關問題