如何设置静态背景图像

Question

如果您查看此页面，您会注意到背景图像无法移动

http://livingsocial.com/deals/31570-86-off-boot-camp-classes?msdc_id=13

1）这是怎么做到的？

2）Twitter为什么不做类似的事情（即，UI缺点是什么？）

Answer 1

CSS：

background-attachment: fixed;

我的。

Answer 2

用纯CSS完成：

body
{
  background-image: url('foo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

Answer 3

您可以使用：

body {
     background: #fff url(path/to/image.png) 0 0 no-repeat;
     background-attachment: fixed;
}

至于'为什么Twitter不这样做？'除非Twitter开发人员出现在Stack Overflow上，否则这不是我们可以回答的问题。历史上使用它意味着页面倾向于“笨拙地”滚动，但这可能只是添加到浏览器上的呈现要求，而不是隐含在background-attachment的行为或使用中。

Answer 4

1）背景中有div个position: fixed，position: fixed。

{{1}}表示视口滚动时不会移动。

2）我不知道......他们可能会想要这个功能。

Answer 5

只需一行

background:transparent url(img.jpg) no-repeat fixed 0 0;

检查http://jsfiddle.net/dFJCt/

处的工作示例