WordPress实现图片左侧叠加带文字白色区块的方法

你之前用z-index+position实现时只有文字生效、白色区块不显示叠加效果，核心原因通常是两点：一是白色区块未设置不透明的白色背景，或被父元素的overflow: hidden意外裁剪；二是父元素触发了独立堆叠上下文，导致z-index层级规则失效。
要同时满足「白色区块叠加在图片左侧」「图片贴靠屏幕右边缘时白色区块不贴左边缘」的要求，用CSS Grid实现比绝对定位逻辑更简单，不需要手动计算偏移值，适配性更好。

核心代码 #

HTML结构 #

两个元素放在同一个父容器内即可，不需要额外嵌套：

<div class="overlay-card">
  <!-- 白色文字承载区块 -->
  <div class="card-text">
    <h2>区块标题</h2>
    <p>区块正文描述内容，根据实际需求填充即可</p>
    <button>交互按钮</button>
  </div>
  <!-- 右侧展示图片 -->
  <img src="你的项目本地图片地址" alt="内容展示图" class="card-image">
</div>

CSS样式 #

如果是WordPress项目，直接把这段代码复制到「外观-自定义-额外CSS」中即可生效：

/* 外层容器 */
.overlay-card {
  display: grid;
  width: 100%;
  min-height: 500px;
  /* 清除主题默认可能带的内外边距，保证图片能贴到右边缘 */
  padding: 0;
  margin: 0;
}

/* 让文字区块和图片同占一个网格位，实现叠加基础 */
.overlay-card > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* 白色文字区块 */
.card-text {
  background: #fff; /* 之前不显示白色块大概率是漏了这行 */
  width: 52%; /* 白色块宽度，可根据设计稿调整 */
  margin-left: 7%; /* 左外边距控制和屏幕左边缘的距离，不会贴边 */
  padding: 4.5rem 3.5rem;
  z-index: 2; /* 层级高于图片，叠在上方 */
  align-self: center; /* 垂直居中对齐图片 */
  box-shadow: 0 3px 18px rgba(0,0,0,0.06); /* 可选：加浅阴影匹配设计稿质感 */
}

/* 右侧图片 */
.card-image {
  width: 68%; /* 图片宽度，比白色块宽一点才能露出叠加效果 */
  justify-self: end; /* 图片靠容器右侧对齐，自动贴住屏幕右边缘 */
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 移动端适配，小屏改成上下排列避免内容挤压 */
@media (max-width: 767px) {
  .overlay-card {
    gap: 1.2rem;
    padding: 0 1rem;
    min-height: auto;
  }
  .overlay-card > * {
    position: static;
  }
  .card-text {
    width: 100%;
    margin-left: 0;
    padding: 2rem 1.5rem;
  }
  .card-image {
    width: 100%;
    height: 280px;
  }
}

问题排查 #

• 如果白色块还是没叠在图片上：检查父元素有没有设置transform、filter、opacity小于1这类会触发新堆叠上下文的属性，删除这类属性即可恢复z-index规则。
• 如果图片没贴到屏幕右边缘：检查外层是否有主题自带的固定宽度容器包裹，给.overlay-card添加margin-right: calc(50% - 50vw)即可强制撑满到视口右边缘。
• 如果叠加比例不对：直接调整.card-text的width、margin-left和.card-image的width数值，匹配设计稿比例即可，不需要修改核心布局逻辑。

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