Question

我想实现您在此网页中可以看到的流畅的背景图像效果： http://217.116.9.130/test2.html（摘自zara.com）

如果您将浏览器调整到左侧，则图片中的女人会在调整大小时离开。我从zara.com上获取了代码，但我怀疑这种效果是由我不知道的语言完成的。

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

非常感谢

Answer 1

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

实施起来非常简单，因此无需其他评论。

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

Answer 3

做一个CSS样式

background-position: center center;

其他选项

center top
center bottom
left top

等...

Answer 4

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

为图片指定一个ID：id="fullImage"

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

当您上下调整left更改时。

这应该这样做：

var el = document.getElementById(fullImage),
width = window.innerWidth,
imageWidth = [width of image here];
window.onresize = function() {
  el.style.left = imageWidth - width + "px";
}

Answer 5

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

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

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

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

5 个答案: