如何获得背景颜色来覆盖兄弟图像？
发布于2022-06-29 22:28 阅读(792) 评论(0) 点赞(19) 收藏(4)
我希望后文本容器的白色背景向上拉一点以覆盖图像的底部（因此是margin-top）。由于某种原因，它目前不是白色的，它是透明的。
怎么了？
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;
}<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 »</a></p>
</div>
<!-- End post-text-container -->
</div>
<!-- End post-container -->解决方案
我明白你现在的意思了。
看起来问题是由于缺少堆叠上下文。
我添加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>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/377124/1caa8eba6cff8d78c934/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力