浏览器上的流体背景图像调整大小答案

【问题标题】：Fluid background image on browser resize浏览器上的流体背景图像调整大小
【发布时间】：2011-09-17 02:26:08
【问题描述】：

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

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

有没有人知道并且可以提供关于如何使用 jquery、css、ajax 或 php 进行操作的线索（或给我一个链接）？

非常感谢

【问题讨论】：

标签： jquery css image background fluid

【解决方案1】：

您可能正在寻找这个：http://css-tricks.com/perfect-full-page-background-image/

实现起来非常简单，因此不需要额外的 cmets。

【讨论】：

【解决方案2】：

您可以使用 css3 封面属性。为它

.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/

【讨论】：

【解决方案3】：

做一个CSS样式

background-position: center center;

其他选项是

center top
center bottom
left top

等等……

【讨论】：

【解决方案4】：

在 Javascript 中只使用了一个 onResize 方法，这样当浏览器发生变化时，就会改变背景图像位置的 CSS。

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

然后他们使用 javascript 来操作 left:; css 样式。

当您调整left 的大小时，会上下变化。

应该这样做：

var el = document.getElementById(fullImage),
宽度 = window.innerWidth,
imageWidth = [此处图像的宽度];
window.onresize = 函数（） {
  el.style.left = imageWidth - 宽度 + "px";
}

【讨论】：

【解决方案5】：

例如，如果你的背景图片包含在你的 body 标签中，那么 CSS 应该包含背景图片分配，然后包括：

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

这样 - 当窗口调整大小时 - 背景会立即随之改变。为模态对话框提供覆盖的原理相同。

【讨论】：