Question

* {
  margin: 0;
  padding: 0;
}

div#parent {
  position: relative;
}

div#container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

img {
  position: absolute;
  width: 100%;
}

<body>
  <div id="parent">
    <img src="bg.jpg" draggable="false">
    <div id="container"></div>
  </div>
</body>

我正在使用<img> as a background。我希望#container位于“background”之上，并且与背景具有相同的尺寸。如果没有JavaScript，我怎么能实现呢？

Answer 1

尝试以下代码

<html>
  <head>
    <style>
      * { margin: 0; padding: 0; }
      div#parent { position: relative; }
      div#container { position: absolute; left:0; top:0; z-index:100; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.5); }
      img { position: relative; width: 100%; }
   </style>
 </head>
   <body>
     <div id="parent">
       <img src="bg.jpg" draggable="false"/>
       <div id="container"></div>
     </div>
   </body>
</html>

Answer 2

您已将position:relative分配给父级div，但是当您指定top和left position时，您未定义孩子代表其父级的位置已将position:absolute设置为父级top和left的孩子。

喜欢以下

Css更改

div#container {
  position: absolute;
  width: 100%;
  top: 0; /* Add this */
  left: 0; /* Add this */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
img {
  width: 100%;
  /* Remove the absolute */
}

* {
  margin: 0;
  padding: 0;
}

div#parent {
  position: relative;
}

div#container {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

img {
  width: 100%;
}

<div id="parent">
  <img src="http://lorempixel.com/400/200/sports" draggable="false" />
  <div id="container"></div>
</div>

绝对的兄弟姐妹拥有相同的维度

2 个答案: