广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于2022-06-29 22:28     阅读(589)     评论(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 &raquo;</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>


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/377124/1caa8eba6cff8d78c934/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)