如何用CSS让H标签置于.entry-image div上方（无法修改HTML）

因为你没法修改生成的HTML结构，我们完全可以通过CSS定位和层级控制来实现标题显示在图片上方，同时让图片看起来像标题的背景。下面是具体的实现代码和思路：

核心思路 #

利用position属性调整元素的位置和层级关系：

• 给标题和图片的共同父容器设置相对定位，作为标题绝对定位的参考基准
• 让标题绝对定位到图片的顶部区域，同时提高层级确保它显示在图片上方
• 可选添加半透明遮罩，让标题文字和图片背景的对比更清晰，提升可读性

具体CSS代码 #

/* 假设标题和图片容器的共同父元素是.post，实际使用时替换成你页面里的父类选择器即可 */
.post {
  position: relative; /* 让标题的绝对定位基于这个父容器 */
  margin-bottom: 2rem; /* 给整体模块添加底部间距，避免和其他内容挤在一起 */
}

.entry-image {
  position: relative;
  z-index: 1; /* 让图片容器的层级低于标题 */
}

/* 让图片充满容器，保证背景效果完整 */
.entry-image img {
  width: 100%;
  height: auto;
  display: block; /* 去掉图片默认的底部间隙 */
}

/* 可选：给图片加半透明遮罩，让标题文字更醒目 */
.entry-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 黑色半透明，可自行调整透明度 */
  z-index: 2; /* 遮罩在图片上方、标题下方 */
}

.entry-title {
  position: absolute;
  top: 1rem; /* 标题距离顶部的间距，可按需修改 */
  left: 1rem; /* 标题距离左侧的间距，可按需修改 */
  right: 1rem; /* 限制标题宽度，避免超出图片范围 */
  z-index: 3; /* 标题层级最高，确保显示在最上方 */
  margin: 0; /* 去掉标题默认的margin，避免影响定位位置 */
  color: #fff; /* 设置白色文字，和图片/遮罩形成明显对比 */
  font-size: 1.25rem; /* 可根据设计需求调整字体大小 */
  line-height: 1.4;
}

注意事项 #

1. 父容器定位：如果你的标题和图片没有共同的父元素，或者父元素已经是相对定位，可以去掉.post的样式，直接给.entry-image设置position: relative，此时标题的绝对定位会基于.entry-image。
2. 位置调整：top、left的值可以自由修改，让标题的位置完全符合你的设计需求。
3. 文字适配：如果你的图片本身比较浅淡，可以把文字改成深色，或者调整遮罩的颜色、透明度，保证文字清晰可读。
4. 响应式适配：如果需要在移动端调整标题大小或位置，可添加媒体查询：

@media (max-width: 768px) {
  .entry-title {
    font-size: 1rem;
    top: 0.5rem;
    left: 0.5rem;
  }
}

这样就能完美实现你想要的效果：标题显示在图片上方，图片看起来像是标题的背景啦！

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