HTML/CSS技术问题：自定义容器背景色与图片文字居中

1. 设置图片容器的自定义背景色 #

你提到的bg-secondary是Bootstrap预设样式类，要设置自定义颜色#82b5cf，直接给图片所在的.col-sm容器添加专属样式即可：

• 给每个包含图片和文字的.col-sm添加统一类名（比如uav-card），方便批量控制样式
• 在CSS中为该类设置background-color: #82b5cf，还可按需加内边距，让内容和容器边缘保留间距

2. 文字置于图片中央+修复字体不生效问题 #

字体不生效原因 #

你当前的CSS用了嵌套写法，这是SCSS/Sass的语法，如果项目没配置预处理器，普通CSS无法识别，所以样式不会生效，需改成标准CSS选择器格式。

文字居中实现 #

要让文字覆盖在图片中央，用相对+绝对定位就能实现：

• 给容器uav-card设置position: relative，作为绝对定位的参考基准
• 给文字.aboutus-card-title设置position: absolute，通过top: 50%、left: 50%配合transform: translate(-50%, -50%)实现精准居中
• 可给文字加白色字体或半透明背景，提升可读性

修改后的完整代码 #

HTML部分

<main>
  <section id="UAV" class="....">
    <div class="container ">
      <div class="row gx-4 ">
        <!-- 添加uav-card类 -->
        <div class="col-sm uav-card">
          <img class="uav-photo" src="img/introduction_1.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
          <p class="aboutus-card-title">Introduction</p>
        </div>
        <div class="col-sm uav-card">
          <img class="uav-photo" src="img/UAV_features_2.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
          <p class="aboutus-card-title">Elements</p>
        </div>
      </div>
    </div>
  </section>
</main>

CSS部分

/* 标准CSS选择器，修复字体不生效问题 */
main .aboutus-card-title {
  font-size: 30px;
  color: #fff; /* 可选：白色文字提升可读性 */
  margin: 0; /* 清除默认边距 */
}

/* 图片容器样式 */
.uav-card {
  background-color: #82b5cf;
  padding: 10px; /* 可选：添加内边距 */
  position: relative; /* 作为文字定位的参考 */
}

/* 图片样式（可选：让图片占满容器宽度） */
.uav-photo {
  width: 100%;
  display: block; /* 清除图片下方默认空隙 */
}

/* 文字居中定位 */
.uav-card .aboutus-card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可选：添加半透明背景 */
  background-color: rgba(0,0,0,0.3);
  padding: 5px 10px;
  border-radius: 4px;
}

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