Question

我想在内部div上方显示背景图像。我怎样才能做到这一点？

这里是code pen，我的代码如下所示。

.adv-signup {position: relative;  background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
  width: 1000px; height: 500px;}

	
.contents {position: absolute; background: blue; width: 800px; height: 200px;top: 20px; left: 30px; }

<div class="adv-signup">
        <div class="contents">
            <div class="text">
                <h3>Sign up for E-News</h3>
                <p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
            </div>

            <div class="controls">
                <input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
                <a href="#" class="btn"></a>
            </div>
        </div>
<div>

Answer 1

这就是“背景图片” 的重点，不是吗：P那是在背景中，而不是前景。

尝试这样的事情：

<nav>
  <img src="">
<nav>
<div class="contents">
  ...
</div>

Answer 2

通过增加top元素的.content属性，将显示背景图像。因此，top属性应该是您用作背景的图像的“真实”高度，您可以通过照片编辑器将其作为旧的Paint或Photoshop进行检查。

这样做不是一个好习惯，因为，当您给父母提供背景图像而给孩子提供背景颜色时，您得到的是事情的工作方式，那么孩子的背景就会堆积在父母的背景上。这里的另一个“问题”是您为absolute元素赋予了一个.content位置，因此该元素从页面流中删除，并将相对于其父元素 NOT 但对于具有position属性的 NEAREST PARENT ，该属性设置为与默认值static不同的值，如果您只是删除position规则，则给出padding等于图像（背景图像）的高度，它将给出相同的结果。只要有必要，请尽量避免放置absolute。

尝试一下：

.contents {
    position: absolute;
    background: blue; 
    width: 800px;
    height: 200px;
    top: 20px; 
    left: 50px; /* put the real image height here, I tried 50px and I looked fine */
}

Answer 3

.adv-signup {
  position: relative;
  background-image: linear-gradient( #fff, #eff1f1);
  width: 1000px;
  height: 500px;
  top: 0px;
  left: 30px;
}

.contents {
  position: absolute;
  width: 1000px;
  height: 400px;
  margin: 1px red;
  padding-top: 0px;
}

.contents .bg {
  background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
  margin: 0;
}

.text {
  font-family: "Ubuntu";
  font-weight: light;
  color: white;
  background-color: #2183c2;
}

.text h3 {
  font-weight: bold;
}

.btn {
  background: #0c5382;
}

<div class="adv-signup">
  <div class="contents">
    <div class="bg">
      <h1>test</h1>
    </div>
    <div class="text">
      <h3>Sign up for E-News</h3>
      <p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
    </div>
    <div class="controls">
      <input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
      <a href="#" class="btn"></a>
    </div>
  </div>
</div>

我已经做到了

https://codepen.io/aspnetgal/pen/GBbPwp

但是股利之间应该没有enter code here的差距

如何在内部div上方显示背景图像

3 个答案: