Question

我想在iPhone / Android（screenshot of it）的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;

Re：您的评论，将您的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

你打算做什么行为？如果内容大于背景图片的高度，那么它根本无法解决。你可以添加一个位置：如果这是你想要达到的，那就固定在身体上。

覆盖所有内容的背景图像

2 个答案: