html - 覆盖所有内容的背景图片

Question

我想在 iPhone/Android 的 Twitter 移动网站中实现类似于背景图像的效果（截图）。

当内容适合屏幕时，我的解决方案有效，但如果有滚动它会中断。

这是我正在使用的 CSS：

.welcome body{
  background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat top left;
  z-index: -1;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  background-origin: padding-box;
  -webkit-background-origin: padding-box;
  background-size: cover;
  -webkit-background-size: cover;
}

html.welcome, .welcome body{
  height: 100%;
}

Answer 1

您需要将背景设置为不滚动：

background-attachment: fixed;

回复：您的评论，将您的 CSS 更改为：

html { 
    background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat center center fixed; 
    -o-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

这将是全屏，任何大小，而不是滚动。

唯一需要注意的是，它不适用于非 CSS3 浏览器（应该适用于任何 Chrome、Firefox 3.6+、IE8+ 和 Opera 10+）。

Answer 2

你打算做什么行为？如果内容大于背景图像的高度，那么它根本就行不通。如果这是您想要实现的，您可以添加一个 position:fixed 到身体。