位置：用背景图像固定？答案

【问题标题】：position: fixed with background image?位置：用背景图像固定？
【发布时间】：2016-07-31 09:01:33
【问题描述】：

当我在页面上添加 <!DOCTYPE HTML> 时，我发现我必须将 position: fixed; 添加到 CSS 中才能使图像显示为“div”的背景，否则我会得到一个空白的白色背景。为什么在这种情况下需要 position = fixed？

 .background_image{
    position: fixed; <-----Why is this needed & Why doesn't static work?
    background: #000 url(../Images/Image.jpg) center center;
    width: 100%;
    height: 100%;
    min-height:100%;
    background-size: cover;
    overflow: hidden;
}

这里是示例 html。 div 中显然还有其他元素，我正在通过标题中的链接导入 css。

<body>
    <div class="background_image">
    </div>
</body>

【问题讨论】：

标签： html background position

【解决方案1】：

发生这种情况是因为height: 100% 在position: fixed 中工作。当你删除这个位置时，它不会占用这个height。所以，还有另一种方法可以做到这一点。您可以使用vh 单位。删除位置fixed，并添加此背景css：

 .background_image{
  height: 100vh;
  background: #000 url(../Images/Image.jpg) center center;
  width: 100%;
  min-height:100%;
  background-size: cover;
  overflow: hidden;
  }

【讨论】：

谢谢...这很好用。在这里设置背景的正确方法是什么？固定还是静态？
@TsTeaTime，在这种情况下保持静态。背景附件固定，用于实现视差效果。

【解决方案2】：

平均 html 所以页面必须遵循 HTML 5 规则

来自 MDN Css 文档

position CSS 属性选择替代的定位规则元素，旨在用于脚本动画效果。

价值观

静态

这个关键字让元素使用正常的行为，也就是说布置在其在流程中的当前位置。上、右、下， left 和 z-index 属性不适用。

相对

此关键字将所有元素布置为好像该元素不是定位，然后调整元素的位置，不改变布局（从而为它应该拥有的元素留下一个间隙如果它没有被定位）。位置的影响：相对于 table-*-group、table-row、table-column、table-cell 和 table-caption 元素未定义。

绝对

不要为元素留出空间。相反，将其放置在相对于其最近定位的祖先的指定位置（如果有），或者相对于初始包含块。绝对地定位框可以有边距，并且它们不会折叠任何其他边距。

固定

不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置并且不移动它滚动时。打印时，将其放置在每一页。此值始终创建一个新的堆叠上下文。当一个祖先的变换属性设置为不同于 none 然后这个祖先被用作容器而不是视口

【讨论】：

【解决方案3】：

你应该对图片使用 background-attachment 属性。

background-attachment 可以有两个值之一。背景附件：固定|滚动；

position 属性用于定位 html 元素，如 div、p 等。因此不能将其与图像一起使用。

你会发现这个链接很有用

http://www.w3schools.com/cssref/pr_background-attachment.asp

【讨论】：