图片加透明文字框怎么弄？

）设置了 position: relative；
❌ 但未设定明确的高度（height 或 min-height），导致其“内容高度塌陷”——即使内部有绝对定位元素，父容器自身仍可能被渲染为高度为 0，使子元素的 bottom: 0 实际参照的是更外层容器（如 #masthead），从而错位。

以你的代码为例：

div.parent2 {
    position: relative;
    bottom: 0;
    left: 0;
}

该样式缺少高度约束，浏览器无法确定 bottom: 0 的“底部”在哪里。因此需补充最小高度（根据图片实际尺寸设定）：

div.parent2 {
    position: relative;
    min-height: 320px; /* 根据图片高度合理设置，确保容纳内容 */
}

同时，为使文本框紧贴图片左下角（与 #eileanDonanIMG 等对齐），需显式指定水平位置：

div.divTest {
    position: absolute;
    bottom: 0;
    left: 20px;   /* 与图片 left: 20px 保持一致 */
    width: 300px;
    background: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
    color: white;
    padding: 12px 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

完整 HTML + CSS 示例（可直接复用）

<div class="parent2">
  <img src="eileanDonan.jpg" id="eileanDonanIMG" alt="Eilean Donan Castle">
  <div class="divTest">
    <h3>爱莲·多南城堡</h3>
    <p>苏格兰最著名的古堡之一，坐落于海中岛屿之上。</p>
  </div>
</div>

.parent2 {
  position: relative;
  min-height: 320px; /* 必须设置！否则 bottom: 0 失效 */
  margin: 20px 0;
}

.divTest {
  position: absolute;
  bottom: 0;
  left: 20px; /* 与图片 left 值严格对齐 */
  width: 300px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 12px 16px;
  border-radius: 4px; /* 可选：提升视觉质感 */
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.divTest h3 {
  margin: 0 0 6px 0;
  font-weight: 700;
  font-size: 18px;
}

.divTest p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

注意事项与最佳实践

• ✅ 始终为 .parent2 设置 min-height 或 height：推荐使用 min-height 以兼容响应式场景（如图片加载延迟或字体渲染差异）；
• ✅ left / right 值需与图片定位严格匹配：避免凭空估算，建议统一提取为 CSS 变量或注释说明；
• ⚠️ 避免滥用 top: 253px 类型的“魔法数字”：它耦合了具体像素值，难以维护且不响应式；
• ✅ 如需多图多文本框，可复用同一结构，通过类名区分（如 .card, .image-overlay），提升可维护性；
• ✅ 若需支持移动端，建议结合 @media 查询调整 width、padding 和 font-size，确保文字可读。

掌握这一模式后，你不仅能解决当前的 div.divTest 错位问题，还能灵活应用于轮播图标题、卡片悬停说明、Banner 引导文案等各类视觉叠加场景。

理论要掌握，实操不能落！以上关于《图片加透明文字框怎么弄？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！