看起来你遇到的核心问题是叠加层被背景图覆盖了，咱们一步步来分析和解决：

问题根源 #

你现在的.bg_img元素同时存在行内的background-image样式和CSS里的background: #221f1f73;设置。由于行内样式的优先级高于外部CSS，所以那个半透明的纯色背景直接被背景图覆盖了，根本没机会显示出来。就算去掉行内样式，单一元素的背景图也会显示在纯色背景之上，文字还是直接叠在背景图上，达不到你想要的效果。

两种可行解决方案 #

方案一：使用多重背景（无需修改HTML） #

这是最简单的方法，直接在CSS里把半透明层和背景图合并成一个多重背景，让半透明层叠加在背景图上方。

首先去掉HTML里行内的style="background-image: url('path-to-image');"，然后修改.bg_img的CSS：

.bg_img {
  /* 用rgba设置半透明背景，和背景图组合成多重背景 */
  background: rgba(34, 31, 31, 0.45) url('path-to-image') no-repeat center center / cover;
  /* 也可以用线性渐变实现（兼容性更好），效果和纯色rgba一致 */
  /* background: linear-gradient(rgba(34, 31, 31, 0.45), rgba(34, 31, 31, 0.45)), url('path-to-image') no-repeat center center / cover; */
}

多重背景的顺序是先写的在最上层，所以这里半透明颜色会覆盖在背景图之上，你的h1文字就能清晰显示了。

方案二：用伪元素做叠加层（更灵活） #

如果之后需要调整叠加层的大小、位置或者添加渐变效果，伪元素的方式会更灵活。同样可以保留你的HTML结构，只修改CSS：

.bg_img {
  background-image: url('path-to-image');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* 让伪元素相对于它定位 */
}

/* 创建一个覆盖整个.bg_img的伪元素作为叠加层 */
.bg_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 31, 31, 0.45); /* 调整最后一个值改变透明度 */
  z-index: 1; /* 让叠加层在背景图之上 */
}

/* 确保h1在叠加层之上 */
.container {
  position: relative;
  z-index: 2;
}

这里通过z-index控制层级：背景图在最底层，伪元素叠加层在中间，h1在最上层，完美解决文字可读性问题。

小提示 #

• 调整rgba()的最后一个数值（0到1之间）可以控制叠加层的透明度，数值越大越不透明。
• 如果用伪元素方案，还可以把background-color改成渐变，比如linear-gradient(to bottom, rgba(34,31,31,0.6), rgba(34,31,31,0.3))，让顶部更暗、底部更亮，视觉效果会更丰富。

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