CSS移動背景圖像

我有一個平鋪的背景圖像，看起來像一個網格。 Tiled background image CSS移動背景圖像

問：

我只是想知道是否有可能使用CSS以得到它正在整個平移效果移動平鋪圖像。但是圖像仍然需要跨越整個屏幕的寬度和高度。

平鋪圖像：

Tile image

當前CSS：

#background 
{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: #7abcff; /* Old browsers */ 
    background-image: url('../images/background.jpg'); 
}

當我調整了CSS梯度值，當你按下向上/向下箭頭，或使用平移工具在右上角。

解決方案：使用jQuery和CSS背景位置：

$('#background').attr("style", "background-position: " + this._bgL + 'px ' + this._bgT + 'px');

來源

2011-09-04 Jack

您可以使用background-position: <offset-x> <offset-y>^[docs]移動背景圖像。

這裏試試：http://jsfiddle.net/4Cwj5/（嘗試改變background-position屬性，然後單擊「運行」）

來源

2011-09-04 13:24:57 arnaud576875

是的背景圖像以及JavaScript，如果你想要一個移動的背景。雖然我不清楚*傾斜*圖像。 –

謝謝，它的工作原理。 – Jack

看看一些視差效果教程。他們設定了你最終瞄準的目標。

Awesome CSS Effect

來源

2011-09-04 13:28:18 Chris

我已經做過一些視差的東西，這不是我想要在這裏完成的效果。我只是平移了將成爲單層的屏幕。該視差教程看起來不錯。 – Jack

我知道視差並不完全是你想要的，但考慮一下：你的效果（固定在板子上的東西）和parralax（以不同速度移動的多個圖層）之間的唯一區別在於你的板子只需要一個層。其他一切（技術，動畫方法）都是一樣的。 – Chris

CSS移動背景圖像

回答

相關問題