2

我的 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>
4

4 回答 4

4

作为替代方案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该元素将相对于该祖先元素定位，而不是相对于页面/文档 (for position: absolute) 或视口 (for position: fixed)。

尽管如果这是为了阻止用户与您网站的内容进行交互，那么它当然注定要失败。

针对 OP 的评论进行了编辑，如下：

你能解释一下为什么吗？我不明白如何/是如何div获得填充窗口的指令。我以为我完全理解position了……我想不是。无论如何，解释将非常有帮助。

当然，这不是什么解释，这只是通过使用absoluteor定位元素fixed，然后将其轴定位在视口的两侧，0px从top，0px从left侧面，0px从right侧面和0px从bottom.

于 2012-07-02T21:09:54.900 回答
2

在 html 和 body 标签上设置 100% 的宽度和（最小）高度。还要注意@black 而不是黑色。

如果你想要一个完整的页面块。将元素设置为固定为您现在拥有的 100% 宽度和高度可能会更好（如其他评论中所述）

固定效果更好，因为它将元素与窗口元素匹配。Absolute 会将元素与最近的祖先相匹配，具有相对、绝对或固定定位。从 IE7 开始支持固定。

于 2012-07-02T21:12:23.480 回答
1

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

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>

于 2017-06-17T06:14:20.240 回答
0

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

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

希望这对你有用:)

于 2012-07-02T21:12:57.097 回答