如何实现宝可梦剑/盾风格Pokedex顶部条纹与红背景精准对齐？

不用再依赖魔法数值硬凑对齐了，下面两种方法可以让深色条纹和红色背景精准贴合，还能适配不同尺寸的容器：

方法一：多背景图层叠加（直接整合背景） #

把深色条纹和红色背景合并成同一个元素的多背景，两者共享容器的尺寸坐标系，从根源上避免错位。

.pokedex-header {
  /* 按顺序：深色条纹在前，红色背景在后 */
  background-image: 
    linear-gradient(#2a2a2a, #2a2a2a), /* 深色条纹的纯色渐变（用多背景统一管理更方便） */
    linear-gradient(180deg, #e5383b 0%, #b81d24 100%); /* 剑盾风格的红色渐变背景 */
  
  /* 条纹占顶部20%高度，红色背景占满整个容器 */
  background-size: 100% 20%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  
  /* 给条纹内的文字留出空间 */
  padding: 0.8rem 1rem;
  color: #fff;
}

注：这里的20%是示例比例，你可以根据剑盾原版的视觉比例调整成更精准的百分比，所有尺寸都基于容器自身计算，不会出现偏移。

方法二：伪元素实现独立条纹 #

如果需要给条纹单独加交互或者更复杂的样式，用伪元素绑定到红色背景容器上，完全依赖容器的尺寸定位：

.pokedex-container {
  background-image: linear-gradient(180deg, #e5383b 0%, #b81d24 100%);
  position: relative;
  /* 给顶部条纹预留高度，和伪元素高度保持一致 */
  padding-top: 20%;
}

.pokedex-container::before {
  content: "By Number";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%; /* 和容器padding-top的百分比完全匹配 */
  background-color: #2a2a2a;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 1.2rem;
  font-weight: bold;
}

这种方法的优势是条纹和背景的高度联动，不管容器是缩放还是响应式调整，两者的相对位置永远精准对齐，不需要任何固定像素值。

核心思路 #

不管用哪种方法，核心都是让条纹的尺寸/位置完全依赖容器自身的尺寸，抛弃固定像素的魔法数值，改用百分比、相对单位，这样就能实现和剑盾原版完全一致的精准对齐效果。

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