Question

我希望文本后容器的白色背景稍微拉起以覆盖图像的底部（因此margin-top）。由于某种原因，它目前不是白色的，它是透明的。

出了什么问题？

＆＃13;

body {
  background-color:#EEF;
}

.post-container img {
  max-width: 385px;
}

.post-text-container {
  background: #ffffff;
  padding: 15px;
  margin-top: -65px;
  margin-left: 20px;
  margin-right: 20px;
}

＆＃13;

<div class="post-container">
  <img src="//via.placeholder.com/350x100" alt="" id="feat-img" />

  <div class="post-text-container">

    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

  </div>
  <!-- End post-text-container -->

</div>
<!-- End post-container -->

＆＃13;

Answer 1

我明白你的意思了。
看起来这个问题是由于缺少stacking context。

我添加了position:relative来创建堆叠上下文。

body {
  background-color: #EEF;
}

.post-text-container {
  position: relative; /* Added this */
  background: #ffffff;
  padding: 15px;
  margin-top: -65px;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="post-container">

  <img src="//via.placeholder.com/350x100" alt="" id="feat-img" />

  <div class="post-text-container">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  </div>

</div>

Answer 2

你的样式表似乎工作正常。

添加此样式

body{
   background-color: #ccc; //something other than white
}

您确定background-color元素的body或post-text-container的父元素不是白色的吗？

请参阅此JSFiddle

如何获得背景颜色来覆盖兄弟图像？

2 个答案: