3

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

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

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

非常感谢

4

5 回答 5

4

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

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

于 2011-06-17T11:02:30.537 回答
3

您可以使用 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/

于 2011-06-17T11:03:32.997 回答
0

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

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

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

于 2014-04-03T16:32:07.433 回答
0

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";
}
于 2011-06-17T11:06:32.357 回答
0

做一个CSS样式

background-position: center center;

其他选项是

center top
center bottom
left top

ETC...

于 2011-06-17T10:59:48.210 回答