位置：用背景图片固定？

Question

当我在页面上添加 <!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 中显然还有其他元素，我正在通过 header.

中的 link 导入 css

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

Answer 1

均值html所以页面必须遵循HTML5规则

FROM MDN Css doc

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

Values

static

This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.

relative

This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context. When an ancestor has the transform property set to something different than none then this ancestor is used as container instead of the viewport

Answer 2

发生这种情况，因为 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;
  }

Answer 3

您应该对图像使用背景附件属性。

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

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

你会发现这个link有用

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

位置：用背景图片固定？

position: fixed with background image?

html

background

position