移动端将图片叠加文本移至图片下方的技术实现需求

嘿，我来帮你搞定这个需求！原来的代码用背景图实现图文叠加，现在我们要改成图片在上、文本在下的布局，同时完美适配移动端，具体步骤如下：

1. 重构HTML结构 #

首先把原来的background-image换成<img>标签（这样更利于响应式布局控制），并把文本容器从背景图容器里移出来，放在图片下方：

<article class="post-featured post-6792 post type-post status-publish has-post-thumbnail hentry category-tech format-standard mobile-video post-visible" data-video="http://www.youtube.com/watch?v=GnfNta6SosA">
  <!-- 新增img标签替代背景图 -->
  <img src="http://theoldcontinent.mgtestsite.com/wp-content/uploads/2017/07/Schermafbeelding-2017-07-10-om-18.54.13-530x300.jpg" alt="文章封面图" class="post-featured-img">
  <!-- 文本容器移到图片下方 -->
  <div class="post-content-container">
    <!-- 这里放原来的文本内容，比如标题、摘要等 -->
    <h2 class="post-title">你的文章标题</h2>
    <p class="post-excerpt">文章摘要内容...</p>
  </div>
</article>

2. 调整CSS样式（含移动端适配） #

接下来修改样式，去掉原有的背景图相关设置，添加响应式规则：

/* 重置post-featured类的原有背景图样式 */
.post-featured {
  background-image: none !important; /* 去掉原来的背景图 */
  display: flex;
  flex-direction: column; /* 让图片和文本垂直排列 */
  width: 100%;
  max-width: 100%; /* 确保容器不超出父元素 */
  margin: 0 auto;
  border: none; /* 按需调整，比如去掉原有边框 */
}

/* 图片的响应式样式 */
.post-featured-img {
  width: 100%;
  height: auto; /* 保持图片比例 */
  object-fit: cover; /* 按需裁剪图片，确保填满容器 */
}

/* 文本容器的基础样式 */
.post-content-container {
  padding: 1rem; /* 给文本加内边距，提升可读性 */
  background-color: #fff; /* 按需设置背景色 */
}

/* 移动端适配（针对屏幕宽度小于768px的设备） */
@media (max-width: 768px) {
  .post-content-container {
    padding: 0.8rem; /* 移动端缩小内边距 */
  }
  .post-title {
    font-size: 1.2rem; /* 移动端缩小标题字号 */
  }
  .post-excerpt {
    font-size: 0.9rem; /* 移动端缩小正文字号 */
  }
}

3. 保留视频交互功能 #

因为原代码有data-video属性，确保你的视频触发逻辑（比如点击图片播放视频）依然可以正常工作，只需要把触发元素从article改成<img>即可，比如调整后的JS逻辑：

document.querySelectorAll('.mobile-video .post-featured-img').forEach(el => {
  el.addEventListener('click', () => {
    const videoUrl = el.closest('.mobile-video').dataset.video;
    // 这里放你原来的视频播放逻辑
  });
});

这样修改后，不管是桌面端还是移动端，都会显示图片在上、文本在下的布局，而且移动端会自动适配屏幕宽度，提升用户体验。

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