CSS 移动背景图片答案

【问题标题】：CSS moving background imageCSS 移动背景图片
【发布时间】：2011-11-10 02:22:46
【问题描述】：

我有一个平铺的背景图像，看起来像一个网格。

问题：

我只是想知道是否可以使用 CSS 移动平铺图像以产生平移的效果。但是图像仍然需要跨越屏幕的整个宽度和高度。

平铺图像：

当前 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');

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用background-position: <offset-x> <offset-y>^[docs] 移动背景图片。

在这里试试：http://jsfiddle.net/4Cwj5/（尝试更改background-position 属性并单击“运行”）

【讨论】：

yes background-image 和 javascript 如果你想要一个移动的背景。我不清楚 tilted 图像。

【解决方案2】：

看看一些视差效果教程。他们设置了您最终的目标。

Awesome CSS Effect

【讨论】：

我之前做过一些视差的东西，这不是我想要在这里完成的效果。我只是平移屏幕，这将是一个单层。不过那个视差教程看起来不错。
我知道视差并不完全是您所追求的，但请考虑一下：您的效果（固定在板上的东西）和视差（以不同速度移动的多层）之间的唯一区别是您的电路板只需要一层。其他一切（技术、动画方法）都是一样的。