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，则它们将没有背景图像。

Answer 2

请先搜索，然后再提问

Use a DIV as a background for another element

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}

.content{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
    position: relative;
    z-index: 100;
}

.background{
    color: #999999;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}

仔细粘贴背景图片

2 个答案: