如何在带背景图的Div上叠加带圆角背景的文本？

需要实现白色文本块叠加在带背景图的圆角容器底部，文本块需带有右上圆角，且左下角与容器的左下圆角对齐（原代码仅实现了右上圆角，缺少左下圆角的适配，同时容器背景图增加了实现难度）。

现有代码 #

HTML #

<div id="outer">
    <div id="innertext">A test title<br>that is on two lines</div>
</div>

CSS #

#outer {
    width:100%;
    height:400px;
    border-radius:20px;
    background-image:url(https://media.istockphoto.com/id/1323032473/es/vector/panal-abstracto-de-vector-azul-moderno-con-fondo-de-monitor-de-coraz%C3%B3n-con-para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
    position:relative;
}
#innertext {
    display:inline;
    border-top-right-radius:20px;
    background-color:#fff;
    padding:5px 25px 0px 5px;
    font-size:40px;
    color:#000;
    
    position:absolute;
    bottom:0px;
}

兼容现代浏览器的解决方案 #

核心思路是利用border-radius直接给文本块添加对应圆角，同时通过容器的overflow:hidden确保圆角与容器边缘完美适配，无需额外遮挡元素：

修改后的CSS #

#outer {
    width:100%;
    height:400px;
    border-radius:20px;
    background-image:url(https://media.istockphoto.com/id/1323032473/es/vector/panal-abstracto-de-vector-azul-moderno-con-fondo-de-monitor-de-coraz%C3%B3n-con-para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
    position:relative;
    overflow:hidden; /* 裁剪超出容器圆角的内容，确保视觉统一 */
}
#innertext {
    display:inline-block; /* 改为inline-block，方便控制尺寸与对齐 */
    border-top-right-radius:20px;
    border-bottom-left-radius:20px; /* 添加左下圆角，与容器圆角匹配 */
    background-color:#fff;
    padding:5px 25px 5px 5px; /* 调整底部padding，避免文本贴边 */
    font-size:40px;
    color:#000;
    position:absolute;
    bottom:0px;
    left:0; /* 固定在左下角，确保左下圆角与容器对齐 */
}

修改说明 #

• 给#outer添加overflow:hidden：确保文本块超出容器圆角的部分被裁剪，避免出现视觉断层
• 将#innertext的display改为inline-block：更好地控制元素的尺寸和布局，避免inline元素的布局限制
• 添加border-bottom-left-radius:20px：让文本块的左下角圆角与容器的左下圆角完全匹配
• 调整padding和添加left:0：优化文本显示位置，确保视觉效果符合需求

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