Question

我的HTML目前包含一个随视口延伸的背景图像。在此范围内，我计划放置一个div，它伸展到视口的高度和宽度，并具有50％不透明度的黑色背景色。

我已将div设置为100％的宽度和高度。 div没有伸展，我无法弄明白为什么！

HTML：

<!DOCTYPE HTML>
<html lang="en"> 
    <head>
        <title>Tester</title>   
        <meta charset="UTF-8"/> 
        <style type="text/css"> 
            html { 
                background: url(http://cjpstudio.com/wp-content/uploads/2011/12/cityrock1.jpg) no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            #background-color   {
                width: 100%;
                height: 100%;
                background-color: #000000;
            }       
        </style>
    </head> 
    <body>  
        <div id="background-color"> 
        </div>  
    </body>

Answer 1

对于width和height的替代方案，您可以使用position：

#background-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
}

这将允许用户滚动将移动#background-color元素的页面，以避免用户移动图片的可能性，而是使用position: fixed。

如果#background-color元素的祖先元素的position不是static，则此元素将相对于该祖先而不是页面/文档定位（对于{{1} }}或视口（用于position: absolute）。

虽然如果这是阻止用户与您网站内容互动的尝试，但当然注定要失败。

已编辑以回应OP的评论，如下所示：

你能解释一下原因吗？我不明白position: fixed是如何得到填充窗口的说明。我以为我完全理解div虽然......我猜不是。无论如何，解释会非常有用。

当然，这并不是一个很好的解释，但这只是通过将元素定位为position或absolute，然后将其轴定位在视口的两侧{{1}来自fixed的{{1}}，0px的{{1}}，top的{{1}}和0px的{{1}}。

Answer 2

在html和body标签上设置宽度和（min-）高度100％。另请注意@black而不是黑色。

如果你想要一个完整的页面块。使用现在的100％宽度和高度将元素设置为固定可能更好（如其他注释中所述）

修复效果更好，因为它会将元素与窗口元素匹配。绝对将元素与最近的祖先匹配，具有相对，绝对或固定定位。自IE7起支持Fixed。

Answer 3

在这种情况下，你基本上需要绝对位置，我只是编辑你的代码，让你完全按照自己的意愿行事：

html {
  background: url(http://chrisjepson.com/wp-content/uploads/2017/06/PrideBus2017_CJP2043-web-700x485.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#background-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: .5;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>Tester</title>
</head>

<body>
  <div id="background-color"></div>
</body>

</html>

Answer 4

背景不会显示，因为该div中没有内容。如果你希望div覆盖页面而没有任何内容，这似乎对我有用

#background-color   {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            background-color: @black;
            }

希望这对您有用：）

设置其容器的空DIV高度和宽度

4 个答案: