css - 仔细粘贴背景图片

Question

我想创建一个背景图像，它不会影响我文档中的其他 div。我这里有这段代码，效果很好:

body,
html {
  height: 100%;
  margin: 0;
}

#bg {
  /* The image used */
  background-color: rgb(0, 0, 0);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#heading {
  position: absolute;
  text-align: center;
  vertical-align: central;
  width: 40%;
  left: 30%;
  color: #F82473;
}

<div id="heading">Some stuff</div>
<div id="bg"></div>

但是，如果我改变我的 div 的顺序，那么它会很奇怪:

body,
html {
  height: 100%;
  margin: 0;
}

#bg {
  /* The image used */
  background-color: rgb(0, 0, 0);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#heading {
  position: absolute;
  text-align: center;
  vertical-align: central;
  width: 40%;
  left: 30%;
  color: #F82473;
}

<div id="bg"></div>
<div id="heading">Some stuff</div>

我应该如何在我的网站上粘贴背景图片才不会影响我文档中的任何其他 div？

Answer 1

请将 div 转换为 div，因为您有 2 个 div。一个用于背景，另一个用于标题就像

<div class="bg"> 
  <div id="heading">Some stuff</div> 
// All the staff for background will goes here 

 </div>

它适用于您的情况，如果您在此之后使用其他 div，它们将没有背景图像。