如何用CSS或Bootstrap实现图片超出深色容器顶部显示？

可以通过Bootstrap定位类+自定义CSS实现需求，核心思路是利用绝对定位让图片对齐容器底部并向上超出，同时给文本区域预留空间避免重叠，具体步骤和代码如下：

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<style>
  .profile-img {
    top: -150px; /* 控制图片向上超出容器的高度，可按需调整 */
    height: auto;
    max-width: 280px; /* 限制图片最大宽度，避免超出布局 */
  }
</style>

<div class="container-fluid text-white bg-secondary py-5"></div>
<div class="container-fluid text-white bg-dark position-relative">
  <div class="container">
    <div class="d-flex flex-column-reverse flex-md-row justify-content-md-between">
      <!-- 图片容器：绝对定位对齐底部 -->
      <div class="position-absolute bottom-0 start-0 d-none d-md-block">
        <img src="http://clipart-library.com/images_k/person-transparent-background/person-transparent-background-16.png" alt="人物头像" class="profile-img px-5" />
      </div>

      <!-- 文本区域：预留左侧空间 -->
      <div class="py-3 py-lg-5 ps-md-5">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <a class="btn btn-primary" href="#">Click here</a>
      </div>
    </div>
  </div>
</div>

关键细节说明 #

• position-relative：给深色容器添加该类，作为图片绝对定位的参考父容器。
• position-absolute bottom-0 start-0：让图片容器固定在深色容器的左下角，d-none d-md-block保证仅在中等及以上屏幕显示该布局（小屏保持原有的列反转布局）。
• .profile-img的top: -150px：通过负的top值让图片向上延伸，超出容器顶部，数值可根据实际需求调整。
• ps-md-5：给文本区域在中等屏幕及以上添加左侧内边距，避免文本被绝对定位的图片覆盖。

内容的提问来源于stack exchange，提问作者Jay