優化非重複圖案

我目前正在將它用於我的網站背景。

問題是該模式不可重複。

我把它設置爲我的身體的背景，所以如果我使用這個CSS，我會得到非常明顯的每個新圖片開始的接縫。

body { 
    background:url(../images/testbackground.jpg) repeat; 
}

我已經知道我可以通過將照片旋轉/翻轉成更大的照片來解決這個問題。我已經完成了here。它是完美的，它是可重複的，它在網站上看起來不錯（你知道，除了在接縫上的鏡像，但這是微不足道的）

問題是，我很大的優化加載速度，互聯網連接速度較慢，因此背景大小應爲4倍的背景不適合我。

有沒有一種方法可以使用代碼旋轉/翻轉照片？我寧願不必使用複雜的jQuery/JavaScript腳本，但現實我知道我必須。

有誰知道這樣做的腳本？

這裏是它需要怎樣旋轉的參考：

來源

2013-05-14 Mark Kramer

我沒有這樣的翻轉和旋轉的解決方案。但我做你的背景重複:)

我只是切斷從右側違規像素，所以背景是現在有點小

repeatable bg

但因爲你是要優化：圖片重複本身已經！所以，你可以進一步將其裁剪到一個更小的尺寸，仍然有幾乎相同的背景：

the smaller bg with same effect

來源

2013-05-14 07:12:53 luksch

現在我出來，我會測試它，當我回來 – 2013-05-14 08:18:00

好了，這裏就是我的。這兩種背景都不可重複。有一種黑暗梯度穿過它們，所以當圖片重複時，接縫非常明顯。通過縮小尺寸進行優化的想法是有效的，但是，我仍然必須使用翻轉來使其更大，但不會像使用全尺寸圖像那樣大。然而，圖像越小，它就會越鏡像，並且看起來不像它應該的那樣隨機。所以我需要找到外觀和速度之間的正確比例。 – 2013-05-14 10:00:39

好吧，我沒有意識到漸變的事情。呃...這是一個嘗試。如果我是你，我會用透明顏色創建一個背景爲png，然後通過css或者這樣做漸變。 – luksch 2013-05-14 10:21:37

優化非重複圖案

回答

相關問題