响应式Web横幅（含背景图与文本）开发问题求助

嘿，我来帮你搞定这两个布局问题！咱们一步步来分析和修改：

问题1：透明div顶部间隙 & 尺寸适配异常 #

你的.transbox里的padding:50%是罪魁祸首——padding的百分比是相对于父元素宽度计算的，这会让透明div上下左右都多出50%宽度的内边距，直接导致顶部间隙和尺寸失控。另外.caption的top:13%也会让它无法贴合banner的上下边缘。

修改方案：

• 把.caption的top:13%改成top:0，再加上bottom:0，这样它会自动填满.banner的整个高度，不需要手动设置height:100%
• 移除.transbox的padding:50%，换成合适的固定内边距（比如1rem）来控制文本和边框的距离
• 用rgba(255,255,255,0.6)代替background-color + opacity，这样只有背景透明，文本不会跟着变浅

问题2：文本垂直居中 #

原来用负margin调整位置的方式不够稳定，而且不是真正的垂直居中。用Flex布局可以轻松解决这个问题：

修改方案：

• 给.transbox添加display:flex; flex-direction:column; justify-content:center;，开启垂直方向的Flex布局，自动让内部元素垂直居中
• 移除.trans-text-top和.trans-text-bottom里的负margin，改用.linebreak的margin控制两行文本的间距

修改后的完整代码 #

CSS

.banner { 
  background: url(https://i.imgur.com/abF4sj3.jpg); 
  background-repeat: no-repeat; 
  background-size: contain; 
  background-position: 50% 50%; 
  width: 100%; 
  height: 423px; 
  display: inline-block; 
  position: relative; 
  margin-top: 0; 
}
.caption { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  width: 150px; 
}
.transbox { 
  padding: 1rem; 
  border-radius: 6px; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(255,255,255,0.6); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  box-sizing: border-box; 
}
.transbox span { 
  font-family: "Times New Roman", Times, serif; 
  font-weight: bold; 
  color: #000000; 
}
.trans-text-top { 
  font-size: 200%; 
}
.trans-text-bottom { 
  font-size: 220%; 
}
.linebreak { 
  margin: 1rem 0; 
}
@media screen and (max-width: 700px) { 
  .transbox { 
    display: none; 
  } 
}

HTML

<div class="banner">
  <div class="caption">
    <div class="transbox">
      <span class="trans-text-top">Tree</span>
      <div class="linebreak"></div>
      <span class="trans-text-bottom">Pathway</span>
    </div>
  </div>
</div>

这样修改后，透明div会完美贴合banner的上下边缘，文本也能稳定地垂直居中，同时保持响应式的效果~

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