制作一个空的DIV高度和宽度的容器

我的HTML当前包含一个与视口一起延伸的背景图像。其中，我计划放置一个div，延伸到视口的高度和宽度，并具有50％不透明度的黑色背景色。制作一个空的DIV高度和宽度的容器

我已将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>

来源

2012-07-02 Olly F

我没有看到这个问题：http://jsfiddle.net/ zdwhK/ – saluce

上面的最终结果意味着用户看到完全黑色的视口。这是因为'div'填充了整个视口并且具有'＃000000'的'background-color'值。 –

对于替代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该元素将相对于祖先，而不是页/文档（position: absolute）被定位的祖先元素或视口（对于position: fixed）。

虽然如果这是企图阻止用户与网站内容交互，那当然注定要失败。

响应编辑从OP，发表意见如下：

你能解释一下为什么吗？我不明白div是如何获得填写窗口的说明的。我以为我完全理解position虽然......我想不是。无论如何，解释会非常有帮助。

当然，它没有太多的解释是，这个简单的工作原理是将材料与任何absolute或fixed定位，然后从left定位其轴对视，0px从top，0px两侧侧，来自right侧的0px侧和来自bottom的0px。

来源

2012-07-02 21:09:54

哈！这不是试图阻止我的网站内容中的用户交互。我只是为一个更大的网站构建基础层，似乎遇到了一些我认为是非常基本的问题。 –

Sidenote，rgba在IE版本中支持不佳 –

注意到了。 rgba支持，谢谢Rene。 –

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

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

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

来源

2012-07-02 21:12:23

对不起，发现了@black，这与问题无关，但我为了清晰起见而对其进行了修改。将尝试你现在的建议。 –

背景不会显示，因为该div中没有内容。如果你想在div覆盖页面，而不存在这一似乎为我

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

作品的所有内容希望这会为你工作:)

来源

2012-07-02 21:12:57

基本上你需要在这种情况下，位置绝对的，我只是编辑代码为你做你想要什么：

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-17 06:14:20 Alireza

制作一个空的DIV高度和宽度的容器

回答

相关问题