背景翻轉使用Javascript的平鋪

我有一個背景圖片，當前重複垂直，並在頁面居中。這裏有一些ASCII藝術來描述圖像，左側和右側標記。背景翻轉使用Javascript的平鋪

---------- 
|  | 
|  | 
|L  R| 
|  | 
|  | 
----------

我想用具有沿着垂直邊緣每次翻到有在整個瀏覽器窗口重複圖像：

---------------------------------------- 
|  ||  ||  ||  | 
|  ||  ||  ||  | 
|L  R||R  L||L  R||R  L| 
|  ||  ||  ||  | 
|  ||  ||  ||  | 
----------------------------------------

現在，我可以創建類似下面的圖像一個已經擁有它重複使用CSS：

-------------------- 
|  ||  | 
|  ||  | 
|L  R||R  L| 
|  ||  | 
|  ||  | 
--------------------

然而，這種形象已經遠大於我希望它是，這樣使得它大2倍是不可能的（尤其是因爲我計劃也有視網膜版！）。我認爲用JavaScript做這件事可能是一個很好的妥協。

有沒有人知道一個JS庫已經可以處理這個問題，或者指向一個能夠給我一個體面的開端的資源？

感謝，

添

來源

2012-11-08 tarmes

你想使用JavaScript翻轉圖像？ – freebird

可以與most browsers CSS做到這一點，通過transform屬性（對於較老的IE瀏覽器，後備filter）; article here。例如： -

img.flipped { 
    -moz-transform: scaleX(-1); 
    -o-transform:  scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform:   scaleX(-1); 
    filter:   FlipH; 
    -ms-filter:  "FlipH"; 
}

Live Example（使用您的gravatar） | Source

它甚至可以在IE6中工作，這歸功於回退過濾器。哇。，當然，IE9（transform支持），瀏覽器，火狐，歌劇......

這樣做，對於背景很可能是一個有點痛，可能需要絕對定位和負的z-index ，但...

來源

2012-11-08 10:25:52

謝謝，這解決了翻轉問題。另一個問題是如何通過創建儘可能多的div來在整個瀏覽器寬度上翻轉它以實現目標...... – tarmes

@tarmes：您可以查詢窗口的寬度，它告訴您需要多少'img'元素創造。或者您可以創造足夠的空間，讓自己感覺合理（比如說，價值3,000英鎊）。創建和添加圖像元素很簡單：'var img = document.createElement（'img'）; img.src =「...」; img.className =「...」; document.body.appendChild（img）;'（或者你可以用'insertBefore'和參考元素來插入其他地方）。 –

由於這個問題真的有兩個方面，翻轉的問題已經在這裏解決了，所以我在另一個問題中更詳細地描述了定位問題：http://stackoverflow.com/questions/13287662/extending-a-a-背景使用JavaScript的 – tarmes

您可以使用CSS3翻轉圖像，但它只能在現代瀏覽器中使用。

看一看這個問題，並已批准的答案：Click Here

來源

2012-11-08 10:28:48 iMoses

背景翻轉使用Javascript的平鋪

回答

相關問題