如何在图片上添加文字时让背景色铺满整行而非仅覆盖文字区域

问题根因 #

• 你为.bgclr设置的100%宽度，是相对于它的直接父元素.cntrd生效的。而.cntrd是绝对定位元素，你没有为它设置宽度属性，它的默认宽度由内部文本内容自动撑开，所以哪怕子元素设置100%宽度，也只能覆盖文字区域。

修复方案 #

仅需修改2处CSS配置即可实现需求：

1. 给.cntrd添加width: 100%属性，让它的宽度和外层.mc容器保持一致
2. 调整.bgclr的display属性为block，块级元素会默认占满父容器的整行宽度，也可以按需添加内边距优化文字显示效果

修改后的完整CSS代码如下：

.mc {
  width: 100%;
  max-width: 1024px;
  position: relative;
}

/* 图片上文字的外层容器 */
.cntrd {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font: 1.5em Calibri, Arial;
  text-align: center;
  /* 新增：让文字容器和外层图片容器宽度一致 */
  width: 100%;
}

/* 文字背景样式 */
.bgclr {
  display: block;
  background-color: rgb(255, 255, 255);
  /* 可选：添加上下内边距让背景高度更协调 */
  padding: 6px 0;
}

修改后文字背景就会铺满整行，不会仅显示在文字下方。

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