如何用CSS实现带圆角的白色头部覆盖在图片上方？

根据你要实现的白色圆角头部覆盖在图片上方的效果，以下是调整后的可行代码：

优化后的HTML结构 #

<article class="image-wrapper">
  <div class="white-rounded-header"></div>
  <img src="./img/slider1.png" alt="" />
</article>

对应CSS样式 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  background-color: black;
}
.image-wrapper {
  position: relative;
  width: 80%; /* 可根据需求调整容器宽度 */
  margin: 0 auto;
}
.image-wrapper img {
  width: 100%;
  border-radius: 0 0 15px 15px; /* 图片底部圆角与头部呼应 */
  display: block; /* 移除图片默认下方空白 */
}

.white-rounded-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px; /* 整合原两个白色块的高度，可按需调整 */
  background-color: white;
  border-radius: 15px 15px 0 0; /* 设置顶部圆角 */
}

核心调整说明 #

• 外层容器设置position: relative，为内部绝对定位的头部提供参照
• 白色头部通过position: absolute脱离文档流，直接覆盖在图片上方，同时用border-radius实现顶部圆角
• 图片添加底部圆角，和头部组合成完整的圆角容器视觉效果
• 简化了原有的两个白色div结构，用单个头部元素实现需求，代码更简洁

内容的提问来源于stack exchange，提问作者TAHER El Mehdi