浏览器调整大小时流动的背景图片

Question

我想实现在这个网页中可以看到的流体背景图片效果： http://217.116.9.130/test2.html（来自zara.com）。

如果你将浏览器调整到左侧，图像中的女人会随着你的调整而向左移动。 我已经从zara.com获取了代码，但我怀疑这种效果是通过一种我不知道的语言完成的。

有人知道并能给出线索（或给我一个链接），告诉我如何使用jquery、css、ajax或php来实现吗？

非常感谢

- ADM

Answer 1

你可能在寻找这个链接：http://css-tricks.com/perfect-full-page-background-image/。这个实现很简单，不需要额外的注释。

- easwee

Answer 2

您可以使用CSS3的`cover`属性来实现。

.container{
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

查看此链接的方法 http://css-tricks.com/perfect-full-page-background-image/

- sandeep

Answer 3

在Javascript中只有一个onResize方法，当浏览器改变时，它会改变背景图片位置的CSS。

给图片一个id：id="fullImage"

然后使用javascript来操作left:; CSS样式。

随着你调整大小，left会上下移动。

这应该可以解决问题：

var el = document.getElementById(fullImage),
width = window.innerWidth,
imageWidth = [图像宽度];
window.onresize = function() {
  el.style.left = imageWidth - width + "px";
}

- Myles Gray

Answer 4

进行CSS样式设置

background-position: center center;

其他选项包括：

center top
center bottom
left top

等等...

- Boopathi Rajaa

Answer 5

例如，如果您的背景图像包含在body标签中，则CSS应包含背景图像分配，然后包括：

top: 0;
bottom: 0;
left: 0;
right: 0;

这样做的好处是，当窗口大小改变时，背景会立即随之改变。同样的原理也适用于为模态对话框提供覆盖层。

- Chris