html - 如何拥有非固定的全屏背景图像？

Question

我知道 several techniques存在具有全屏背景图像，使用 CSS3 或绝对定位和 100% 高度/宽度。

但是，所有这些技术都会产生固定的背景图像，这意味着如果您的内容比需要滚动条的屏幕大，则滚动时背景图像将保持固定。

是否可以将背景图片拉伸(stretch)到页面的宽度/高度，而不是屏幕？

Answer 1

我在构建全屏幻灯片时遇到了同样的问题:固定位置使图像在滑动包含元素时保持原位，而不是让它们与此元素一起滑动...

我使用 those techniques 尝试了很多解决方法:

• 纯 CSS 技术 #1:位置设置为 relative 时效果很好，但不会使图像垂直居中。

• 很棒的、简单的、渐进的 CSS3 方式:我之前尝试了所有的可能性，但都没有成功，才意识到不填充位置值是有效的(真的很棒)!

  html { 
      background: url(images/bg.jpg) no-repeat center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }