如何用CSS 2实现文本叠加在图片上方？（适配旧设备）

要让文本第一行叠加在图片上，兼容仅支持CSS2的旧设备（如IE6/7等），最优方案是利用负外边距（Negative Margin）或绝对定位，两种方法均为CSS2原生属性，兼容性拉满：

方案一：负外边距（推荐，无需修改DOM结构） #

通过给标题设置负上外边距，让它向上移动覆盖图片底部区域，适合大多数场景：

修改后的完整代码 #

<html>
<head>
<title></title>
<style>
p.image {
    text-indent: 0;
    text-align: center;
    /* 可选：给图片容器预留叠加空间，避免文本完全覆盖图片主体 */
    padding-bottom: 40px;
}

p.image img {
    max-width: 100%;
    /* 兼容IE6，强制图片自适应宽度 */
    _width: 100%;
}

h2 {
    /* 负上外边距控制向上偏移的距离，根据图片高度和文本大小调整 */
    margin-top: -60px;
    /* 可选：添加背景色，避免图片和文本重叠导致可读性差 */
    background-color: #ffffff;
    /* 保持和图片对齐的居中样式 */
    text-align: center;
    /* 可选：给文本加内边距，避免贴边 */
    padding: 0 15px;
}
</style>
</head>
<body>
<p class="image"><img src="image.png"/></p>
<h2>Title<br/>title</h2>
<p>Lorem ipsum.</p>
</body>
</html>

方案二：绝对定位（适合固定位置叠加） #

如果需要文本固定在图片的某个位置（比如底部），可以给图片容器设置相对定位，再让标题绝对定位到目标区域：

修改后的核心样式 #

p.image {
    text-indent: 0;
    text-align: center;
    /* 设置相对定位作为绝对定位的参考容器 */
    position: relative;
    /* IE6/7触发hasLayout，确保容器能包裹绝对定位元素 */
    zoom: 1;
}

p.image img {
    max-width: 100%;
    _width: 100%;
}

h2 {
    /* 绝对定位到图片容器底部 */
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    padding: 0 15px;
}

方案优势 #

• 完全兼容CSS2标准，旧设备无兼容问题
• 无需额外修改HTML结构，代码简洁易维护
• 叠加位置可通过数值精准调整，适配不同尺寸的图片和文本

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