如何让激活标签（Tab）背景与父容器背景图无缝衔接

需求要点 #

• 激活状态的Tab背景需延续父容器的背景图，视觉上与父容器无缝衔接
• 消除Tab之间间隙、圆角区域露出的父容器背景

修改后的完整代码 #

HTML

<div class="container">
  <div class="tabs">
    <div class="tab-item active">one</div>
    <div class="tab-item">two</div>
    <div class="tab-item">three</div>
  </div>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo cumque veniam magni earum aliquam suscipit minus natus neque ut, velit alias odio porro numquam accusantium! Assumenda autem aliquid corporis. Cupiditate.</div>
</div>

CSS

.container {
  display: flex;
  flex-flow: column;
  max-width: 540px;
  background-image: url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tabs {
  display: flex;
  width: 100%;
  background: red; /* 填充Tab间距区域，避免父背景透出 */
}

.tab-item {
  flex: 1; /* 均分宽度，替代固定百分比 */
  background: red;
  padding: 20px;
  border-radius: 15px 15px 0 0;
  margin-left: 10px; /* 实现Tab间距 */
}

.tab-item:first-child {
  margin-left: 0; /* 第一个Tab移除左间距 */
}

.tab-item.active {
  background: inherit; /* 继承父容器背景图，实现无缝延续 */
}

.content {
  height: 500px;
  padding: 20px;
  background: #fff; /* 内容区设白色，避免父背景透出 */
}

关键修改说明 #

1. 父容器背景优化：添加background-size: cover和background-position: center，确保背景图完整铺满容器，为Tab背景延续提供统一的视觉基础。
2. 解决间隙透出父背景：
   • 移除.tabs的gap属性，改用.tab-item的margin-left实现间距
   • 给.tabs设置与非激活Tab一致的红色背景，填充Tab之间的间距区域，彻底消除父背景透出
3. 激活Tab背景延续：
   • 修正原错误选择器.tab-item .active为.tab-item.active（原选择器会寻找Tab内部的.active子元素，逻辑错误）
   • 激活Tab设置background: inherit，直接继承父容器的背景图，实现视觉上的无缝衔接
4. 圆角区域处理：激活Tab的圆角区域会自动继承父背景，非激活Tab的红色背景则覆盖父背景，解决圆角附近透出父背景的问题

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