Question

当我在页面上添加<!DOCTYPE HTML>时，我发现我必须将position: fixed;添加到CSS中，以便将图像显示为＆＃34; div＆＃的背景34;否则我得到一个空白的白色背景。为什么这需要在这种情况下固定位置？

 .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>

Answer 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;
  }

Answer 2

平均html因此页面必须遵循HTML 5规则

FROM MDN Css doc

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

<强>值

<强>静态

此关键字允许元素使用正常行为，即它   布局在流程中的当前位置。顶部，右侧，底部，   left和z-index属性不适用。

<强>相对

此关键字列出所有元素，就好像元素不是   定位，然后调整元素的位置，而不改变   布局（从而为元素留下一个空隙   一直没有定位）。位置的影响：相对于   table - * - group，table-row，table-column，table-cell和table-caption   元素未定义。

<强>绝对

不要为元素留出空间。相反，将它定位在   相对于其最近定位的祖先的指定位置（如果有的话），   或者相对于初始包含块。绝对   定位的盒子可以有边距，它们不会随之崩溃   其他利润。

<强>固定

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

Answer 3

您应该将背景附件属性与图像一起使用。

background-attachment可以包含两个值中的一个。 background-attachment：fixed | scroll;

position属性用于定位html元素，如div，p等。所以你不能将它用于图像。

您会发现此链接很有用

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

位置：用背景图片修复？

3 个答案: