位置：固定有背景图片？

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

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

来源

2016-07-31 TsTeaTime

出现这种情况，是因为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; 
    }

来源

2016-07-31 09:12:22

谢谢...这个伟大的工作。什么被认为是在这里设置背景的正确方法？固定还是静态？ – TsTeaTime

@TsTeaTime，在这种情况下保持静态。背景附件固定，用于实现paralx效果。 –

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

FROM MDN的CSS文档

位置的CSS属性选择替代规则定位元素，设计为有用脚本动画效果。

值

静态

这个关键字让元件使用正常的行为，那就是它是在流的当前位置布局。 top，right，bottom， left和z-index属性不适用。

相对

此关键字勾画出的所有元素，就好像元件没有定位，并且然后调整元件的位置，而不改变布局（并因此留下间隙为在那里将具有元件一直没有被定位）。位置的影响：相对于表 - * - 组，表行，表列，表格单元和表标题元素是未定义的。

绝对

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

固定

不要为元素留出空间。相反，将其定位在相对于屏幕视口的指定位置，并且在滚动时不要将其移动到。打印时，请将其定位在每页上的固定位置。此值始终创建新的堆叠上下文。当祖先具有与变换属性设置为东西比没有不同，则祖先被用作容器，而不是视

来源

2016-07-31 09:10:51 scaisEdge

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

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

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

你会发现这个链接有用

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

来源

2016-07-31 09:18:53

位置：固定有背景图片？

回答

相关问题