如何为Bootstrap 4的row元素添加背景图片？求助

首先，你的CSS写法存在一个关键错误：重复使用background简写属性会导致后面的声明覆盖前面的。比如你写了background: url("../images/BG/DiagnolL.jpg") !important;之后，又写了background: no-repeat !important;，这会把之前的背景图路径完全覆盖，相当于只设置了background-repeat: no-repeat，而丢失了图片路径。这是背景图不显示的核心原因之一。

另外，Bootstrap的row类默认是display: flex，当你给它加上position: absolute后，它的宽度和高度不会自动撑满父容器，没有尺寸的容器自然无法显示背景图。

下面是具体的修复方案：

1. 修复CSS写法（推荐） #

把所有背景相关的属性合并到一个background简写声明中，同时明确设置容器的宽度和高度：

#diagL{ 
  z-index: 99; 
  position: absolute; 
  width: 100%; /* 确保宽度占满父容器 */
  min-height: 100vh; /* 按需求设置高度，100vh表示占满视口高度 */
  /* 合并所有背景属性，避免覆盖 */
  background: url("../images/BG/DiagnolL.jpg") no-repeat center center / cover !important;
}

这里的/ cover是设置background-size: cover，确保图片覆盖整个容器。

2. 验证图片路径是否正确 #

检查你的项目文件结构是否和路径匹配：

你的项目根目录/
├── css/
│   └── overwrite.css （当前CSS文件位置）
├── images/
│   └── BG/
│       └── DiagnolL.jpg （图片位置）

如果路径不对，浏览器会返回404错误。你可以打开浏览器开发者工具（F12），切换到Network标签，刷新页面后查看图片的请求状态，确认是否加载成功。

3. 内联样式测试（排除优先级问题） #

如果CSS文件的样式被Bootstrap的默认样式覆盖，可以尝试直接在HTML中写内联样式：

<div id="diagL" class="row text-center" style="position:absolute; z-index:99; width:100%; min-height:100vh; background: url('../images/BG/DiagnolL.jpg') no-repeat center center / cover;">
  <div class="col-sm-6"> 
    <p id="txtzoom" class="display-1 font-weight-bold">ART.</p> 
  </div> 
  <div class="col-sm-6"> 
    <p id="txtzoom" class="display-1 font-weight-bold text-warning">SCIENCE.</p> 
  </div>
</div>

4. JavaScript动态设置方案（备选） #

如果以上方法都无效，可以用JS动态给容器设置背景样式，确保DOM加载完成后执行：

// 放在body标签末尾，确保元素已加载
const diagL = document.getElementById('diagL');
diagL.style.position = 'absolute';
diagL.style.zIndex = '99';
diagL.style.width = '100%';
diagL.style.minHeight = '100vh';
diagL.style.backgroundImage = "url('../images/BG/DiagnolL.jpg')";
diagL.style.backgroundRepeat = 'no-repeat';
diagL.style.backgroundPosition = 'center center';
diagL.style.backgroundSize = 'cover';

另外，注意你有两个元素用了相同的id="txtzoom"，这不符合HTML规范，ID应该是唯一的，建议改成class或者不同的ID，避免潜在问题。

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