用CSS重複多個圖像-x

我正在製作一個需要顯示巨大圖像的UHD項目。固定式瀏覽器沒有問題，但iOS和一些移動瀏覽器在該領域非常有限。 iOS PNG的最大分辨率爲500萬像素，遠低於我需要顯示的大多數圖像。用CSS重複多個圖像-x

Jpeg和其他格式不是一個選項。

到目前爲止，我決定將大圖片拆分爲更小的圖片，並且遇到了問題。我創建了一個小提琴來展示發生了什麼。

正如你可以看到我用了2個圖像中的「背景圖片」，顯示確切的問題。第一個圖像（圓圈）出現在第二個（方形）的頂部。

這裏是CSS代碼：

<style type="text/css"> 
     html { 
     overflow-x: hidden; 
     } 
     html, body { height: 100%; width: 100%;} 
       body { overflow-x: hidden; 
       background-image: url('http://www.clipartbest.com/download?clipart=di7eRd49T'), url('http://i126.photobucket.com/albums/p89/robertthomas_2006/600x600.png'); 
      background-repeat: repeat-x, repeat-x; 
       background-position: left, right; 
       }

和jQuery：

$(function(){ 
     var x = 0; 
     setInterval(function(){ 
     x-=1; 
     $('body').css('background-position', x + 'px 0'); 
    }, 10); 
    });

所以問題是，這兩個「小」圖像不是並排。如果我將它們拼接成一個大的圖像，沒有任何問題。但是移動設備無法處理它。

據我所見，我的css中的「background-postion」由於某種原因被忽略。

SO有沒有辦法將「background-repeat：repeat-x」應用於整塊背景圖像並將圖像並排放置？

我需要從2到10個背景圖像作爲「有機整體」在同一時間重複。

是否可以使用我正在使用的方法？如果不是 - 最好的解決方案是什麼？

來源

2014-06-26 user3299345

爲什麼不使用css @media查詢來呈現移動特定樣式 – Mark

幾個原因：它們進度太快。其中一些具有4「-5」顯示器，分辨率比固定的23「-24」顯示器更高。今天的移動設備能夠處理大多數常規網頁。除了@media手持設備之外，它僅指那些過去幾年甚至不能真正展示網頁的古老微型proto-html手機。 ePUB，MOBI，平板電腦，供應商社區都強調說：「我們不是」@media手持設備「！因爲他們正確地擔心這會使他們永遠地置身於「真實」網頁的無人地帶。 – user3299345

我不會使用特定於設備的媒體查詢，我會使用@media（min-width：600px）和（max-width：800px）這幾行的內容，在我開發響應式網站時，它總是適用於我。 – Mark

那麼背景屬性是不是在任何方式做你想做什麼舒適。我建議你然後把圖像放在一個div中，另一隻手的div可以顯示在其他內容的下面（絕對位置），所以它作爲背景。請注意，您也必須爲您的內容設置z-index，並且它應該比您的「背景」div的z-index更高。同樣，我建議你不要無休止地重複整組圖像，而是在到達最後一幅時重新開始動畫。如果您需要對上述某些形式的更深入的解釋，請給我一個評論。

來源

2014-06-26 09:32:05

謝謝你的回覆，但我不認爲你完全明白我想達到的目標。我需要放置2個（或5個或20個）像這樣的圖像，並且無限地水平重複這個圖形。你的方法爲我提供了這樣的形式，無論水平還是垂直重複。形式和重複都不正確。 – user3299345

我確實感到困惑了一些，而且我也沒有看到這個圈子實際上有白色背景。整個答案改變了，看看它。 –

用CSS重複多個圖像-x

回答

相關問題