使用HTML+CSS实现带叠加文本的图片分半及移动端指定布局

嘿，我来帮你搞定这个需求！咱们要把一张图片切成左右两半，每半都叠加自定义文本，同时在移动端视图下让这两个半图分别位于容器的左上角和左下角。直接上可运行的代码和关键说明：

核心实现思路 #

• 用一个父容器包裹两个子元素，分别承载左右半图
• 利用background-position将同一张图片分别显示左半部分和右半部分，避免额外切割图片
• 给每个半图添加绝对定位的叠加文本，确保文本悬浮在图片上方
• 通过媒体查询切换移动端布局，将两个半图从横向并排改为纵向上下排列（左上+左下）

HTML 结构 #

<div class="split-image-container">
  <div class="split-item split-left">
    <div class="text-overlay">左半图文本</div>
  </div>
  <div class="split-item split-right">
    <div class="text-overlay">右半图文本</div>
  </div>
</div>

CSS 样式 #

/* 全局重置，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.split-image-container {
  width: 100%;
  height: 400px; /* PC端容器高度，可根据需求调整 */
  display: flex; /* PC端横向排列两个半图 */
  position: relative; /* 为移动端子元素绝对定位提供参考 */
  overflow: hidden;
}

.split-item {
  flex: 1; /* 平分容器宽度 */
  height: 100%;
  background-image: url('你的图片URL'); /* 替换成你的图片地址 */
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; /* 为叠加文本提供定位参考 */
}

/* 左半图显示图片左侧区域 */
.split-left {
  background-position: left center;
}

/* 右半图显示图片右侧区域 */
.split-right {
  background-position: right center;
}

/* 叠加文本样式 */
.text-overlay {
  position: absolute;
  bottom: 20px; /* 文本距离底部的距离，可调整 */
  left: 20px; /* 文本距离左侧的距离，可调整 */
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明背景增强可读性 */
  border-radius: 4px;
}

/* 移动端适配（屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  .split-image-container {
    height: 600px; /* 移动端容器高度，可调整 */
    flex-direction: column; /* 改为纵向排列 */
  }

  .split-item {
    width: 100%;
    height: 50%; /* 平分容器高度 */
    background-position: center center; /* 移动端显示图片中心区域 */
  }

  /* 左半图定位到左上角 */
  .split-left {
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 右半图定位到左下角 */
  .split-right {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

关键要点说明 #

• 图片分割技巧：通过background-position控制同一张图片的显示区域，无需提前切割图片，维护更方便
• 叠加文本定位：利用子元素的position: relative和文本的position: absolute，确保文本始终悬浮在图片上方
• 移动端布局切换：媒体查询中通过绝对定位将两个半图分别固定在容器的左上和左下，同时调整背景位置保证图片显示完整
• 样式可定制：你可以根据需求修改容器高度、文本位置、颜色、背景透明度等参数

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