时间戳

首页 > 解决方案 > 小心粘贴背景图片

css - 小心粘贴背景图片

问题描述

我想创建一个对文档中的其他 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？

标签： csshtml

解决方案

请使用 div 到 div 因为你有 2 个 div。一个用于背景，另一个用于标题，就像

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

 </div>

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

推荐阅读