javascript - CSS移动背景图片

标签 javascript html css

我有一个平铺的背景图像,看起来像一个网格。 Tiled background image

问题:

我只是想知道是否可以使用 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-position:

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

最佳答案

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

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

关于javascript - CSS移动背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7299482/

相关文章:

javascript - 通过动画 div 向左推送动画 float 的 div

PHP : add a html tag around specifc words

javascript - 为什么这不会传递给下一个组件(ReactJS)?

javascript - 模块化和抽象 react 组件功能

javascript - 如何仅在第一页(div)隐藏 "previous"按钮并在最后一页(div)隐藏 "next button"

javascript - Blueimp jQuery 文件上传 - 上传完成响应后隐藏队列中的文件

javascript - 如何将 HTML/JS 插入由 chrome.windows.create 创建的窗口(类型为 "panel")?

javascript - 背景图片没有变化

html - 添加图标以选择下拉菜单

css - 如何使用 Local DateTimePicker 访问弹出控件的 CSS 样式