CSS：背景图片答案

【问题标题】：CSS: Background ImageCSS：背景图片
【发布时间】：2014-07-31 19:50:11
【问题描述】：

使用 CSS，我怎样才能使页面的背景图像在我向下滚动页面时不会移动（将保持静止）？文本和其他元素显然应该移动，但我希望背景图像保持不变。

同样使用 CSS，我怎样才能让背景图片适合用户全屏？比如一张4000×3000px的背景图，显然不会在大部分用户的屏幕上完全显示出来，我怎样才能让它按比例缩小，整个背景图都显示在用户的屏幕上呢？

【问题讨论】：

固定背景图片+封面？
google.com/?q=css+background+image+fixed

标签： html css

【解决方案1】：

嘿，使用这个 css 规则（css3 属性）：“cover”

html { 
  margin:0;
  padding:0;
  background: url(http://placehold.it/4000x3000) no-repeat center fixed; 
  -webkit-background-size: cover; /* Chrome and Safari */
  -moz-background-size: cover; /*  Firefox */
  -o-background-size: cover; /* Opera */
  background-size: cover;
}

http://jsfiddle.net/3BKJt/1/

【讨论】：

这是不正确的。您所需要的只是 background-attachment: fixed 属性。这本身会阻止背景图像可滚动。
即使您使用的小提琴也使用 background-attachment:fixed 属性来产生这种效果。
看这里->jsfiddle.net/q7df3/1。你的 fiddle 和这个 fiddle 的唯一区别是 background attachment 属性值不同。
问题是：我怎样才能使它按比例缩小，整个背景图像将显示在用户的屏幕上？
让我们continue this discussion in chat.

【解决方案2】：

body{
background-repeat:no-repeat;
background-position: stretch center;
background-size: cover;
background-attachment: fixed;
}

如果您希望无论您的页面大小如何都可以拉伸背景以适应屏幕，请使用此代码。解决在一定范围内调整大小时出现白色空白区域的问题。

【讨论】：

【解决方案3】：

你可以定位到body或者html

body {
            background-image: url('http://placehold.it/1000x1000');
            background-size: 100%;
            background-atttachment: fixed;
        }

Fiddle

【讨论】：

【解决方案4】：

如果你想让背景图片不能滚动，那么无论你放置什么图片作为背景，你只需要一个 CSS 属性来设置它：

background-attachment: fixed;

你可以在这里看到：http://jsfiddle.net/dUZCb/2/

希望对你有帮助！！！

【讨论】：

问题是：那是 4000 像素乘 3000 像素显然赢了[...]