如何用纯CSS实现与父容器连续无错位的标题块背景效果

问题根因 #

之前直接给标题块单独设置背景的实现，因为默认会以标题自身的盒子为参考系计算背景的定位、尺寸，和父容器的背景参考系完全不统一，所以必然会出现图案错位、视觉断裂的问题。另外之前的错误尝试中给标题设置的背景用了background-size: contain，和父级的cover规则不统一，就算定位对齐，图片的裁切比例也会不一致，进一步加剧了视觉断裂的问题。
以下是两种可落地的纯CSS实现方案，不需要修改原有HTML结构： #

方案一：统一背景参考系对齐 #

核心思路是把父容器和标题块的背景定位参考系统一为同一个坐标系，让两个元素上显示的背景图案完全严丝合缝：

• 给父容器.header和标题.title配置完全相同的背景参数
• 两个元素的背景都开启background-attachment: fixed，让背景的定位、尺寸计算都以视口为统一参考系
• 给标题设置z-index: 1，保证标题的文字内容叠在背景层上方
  核心修改代码：

.header {
  width: 100%;
  padding-top: 30%;
  /* 新增fixed属性统一参考系 */
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50% fixed;
  background-size: cover;
  position: relative;
}
.title {
  position: absolute;
  transform: translateY(-50%);
  padding: 8px 24px;
  font-size: 24px;
  border-radius: 50px;
  border: 4px solid white;
  left: 10%;
  z-index: 1;
  /* 和父级配置完全一致的背景 */
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50% fixed;
  background-size: cover;
}

方案特点：实现零计算，不需要手动测算偏移量，背景图案连续无错位，适合无页面滚动的静态场景；如果应用在可滚动页面，会出现固定背景的视差滚动效果。 #

方案二：扩展容器承载范围（无视差问题） #

核心思路是调整父容器的尺寸，让原本露在父容器边界外的标题部分，完全落在父容器的盒子范围内，同时微调背景的定位偏移，保证原有的视觉效果不发生变化：

• 给父容器.header增加高度，高度值等于标题块的总高度（含内边距、边框的实际尺寸即可）
• 对应把背景的垂直定位向上偏移半个标题的高度，抵消容器增高带来的背景位置偏差，保持原有视觉效果不变
• 把标题的定位从原来的相对顶部偏移，改为固定在父容器的下边缘，保持标题上半部分在背景区域内、下半部分在容器区域外的原有视觉效果
  核心修改代码：

.header {
  width: 100%;
  /* 原高度为父级宽度的30%，新增60px作为标题露出部分的承载空间（值取标题实际总高度） */
  padding-top: calc(30% + 60px);
  /* 背景垂直位置向上偏移30px，和高度变化抵消，保持原背景的裁切位置不变 */
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% calc(50% - 30px);
  background-size: cover;
  position: relative;
}
.title {
  position: absolute;
  transform: translateY(-50%);
  /* 固定标题在容器下边缘位置 */
  bottom: 0;
  padding: 8px 24px;
  font-size: 24px;
  background: transparent;
  border-radius: 50px;
  border: 4px solid white;
  left: 10%;
}

方案特点：完全不存在视差滚动问题，背景和容器深度绑定，可正常应用在长滚动页面中，只需要根据标题实际尺寸调整高度和偏移值即可。 #

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