HTML/CSS如何实现错位带黑底文字效果并封装为可复用组件

核心思路 #

• 将两行文本拆分为独立的<span>标签，不用空格字符控制缩进，直接通过CSS控制第二行的左内边距实现错位效果
• 外层容器改为自适应宽度，方便作为组件放在图片上方任意位置使用

修改后代码 #

HTML #

<!-- 可复用的错位黑背景标题组件 -->
<div class="staggered-title">
  <h1>
    <span>Hello,</span>
    <br>
    <span class="second-line">World!</span>
  </h1>
</div>

CSS #

.staggered-title {
  /* 宽度随内容自适应，方便定位到图片上方 */
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: normal;
}

.staggered-title h1 {
  color: #fff;
  font-size: 2.5rem;
  /* 控制行高保证两行背景无缝衔接 */
  line-height: 4rem;
  margin: 0;
}

.staggered-title h1 span {
  background-color: #2d2d2d;
  padding: 0.8rem 1.2rem;
  box-shadow: 1rem 0 0 #2d2d2d, -1rem 0 0 #2d2d2d;
  box-decoration-break: clone;
}

/* 第二行额外加左缩进实现错位 */
.staggered-title h1 .second-line {
  padding-left: 3.5rem;
  /* 按需调整这个数值控制错位幅度 */
}

可复用性说明 #

• 调用时只需要修改<span>内的文本内容即可快速生成同款样式的标题
• 外层.staggered-title可以直接配合position: absolute定位到图片任意位置，不需要额外调整内部样式
• 如果需要调整错位幅度，只需要修改.second-line的padding-left数值即可

内容的提问来源于stack exchange，提问作者Nikola S.