求助：如何用HTML/CSS实现图片与文字部分重叠分层的效果？

单纯通过z-index无法实现单个元素部分层级高于文字、部分低于文字的效果，因为z-index作用于整个元素。要达成需求，我们可以将图片拆分为上下两个独立视觉区域，分别设置不同层级来实现交错效果。

步骤1：调整HTML结构 #

保留原有文字，将图片改为两个相同的元素（复用同一张图片），分别用于显示上半部分和下半部分：

<div class="container-fluid home-component bg-dark">
  <div class="row">
    <div class="col-12 text-center">
      <h1>
        D<span>O</span>G
      </h1>
      <!-- 图片上半部分 -->
      <img src="./images/german-shepherd-2-1.png" alt="" class="img-top">
      <!-- 图片下半部分 -->
      <img src="./images/german-shepherd-2-1.png" alt="" class="img-bottom">
    </div>
  </div>
</div>

步骤2：编写核心CSS #

通过clip-path裁剪图片，分别控制上下两部分的显示区域，再通过z-index设置层级：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar .nav-items ul {
  gap: 20px;
  color: white;
}

.navbar .nav-items ul li a {
  color: white;
}

.nav-container {
  background: #151669;
}

.home-component {
  height: 100vh;
  background-color: black;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-component h1 {
  font-size: 40vw;
  background: linear-gradient(rgb(238, 19, 19) 52%, rgb(239, 88, 18) 60%, rgb(234, 212, 23) 61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2; /* 文字层级介于图片上下部分之间 */
}

/* 图片上半部分：裁剪上50%区域，层级高于文字 */
.home-component .img-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  clip-path: inset(0 0 50% 0); /* 裁剪掉下半部分 */
  z-index: 3;
}

/* 图片下半部分：裁剪下50%区域，层级低于文字 */
.home-component .img-bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  clip-path: inset(50% 0 0 0); /* 裁剪掉上半部分 */
  z-index: 1;
}

@media (max-width: 768px) {
  .home-component h1 {
    font-size: 30vw;
  }
}

关键原理说明 #

• clip-path: inset()：通过裁剪指令精准控制图片显示区域，inset(0 0 50% 0)表示保留图片上半部分，inset(50% 0 0 0)保留下半部分。
• 层级控制：文字z-index:2，图片上半部分z-index:3（覆盖文字），下半部分z-index:1（被文字覆盖），实现交错视觉效果。
• 冗余代码清理：删除了原有代码中重复的定位样式、无效的opacity:1.5（opacity最大值为1）和冲突的display属性。

替代优化方案（无需额外HTML元素） #

如果不想添加额外的img标签，可以使用CSS伪元素实现：

.home-component::before,
.home-component::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  background-image: url("./images/german-shepherd-2-1.png");
  background-size: cover;
  background-position: center;
}

.home-component::before {
  clip-path: inset(0 0 50% 0);
  z-index: 3;
}

.home-component::after {
  clip-path: inset(50% 0 0 0);
  z-index: 1;
}

此时HTML只需保留原有的h1即可，移除原img标签。

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