使用Bootstrap 5时设置的HTML背景图片不显示该如何解决？

你遇到的问题由三个常见错误导致，按以下步骤修改即可：

• 调整CSS引入顺序
  自定义样式需要放在框架样式之后才不会被覆盖，把head标签中estilo.css的引入代码移到Bootstrap CSS引入代码的下方，调整后head部分的引入顺序为：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Base Apparel coming soon page</title>
<!-- 先引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 再引入自定义CSS -->
<link rel="stylesheet" type="text/css" href="estilo.css">

• 覆盖Bootstrap默认的body白色背景
  Bootstrap 5默认给body设置了白色背景，会挡住html标签的背景图，在estilo.css中添加以下代码即可：

body {
  background-color: transparent;
}

• 修正栅格结构
  你当前使用的.row类没有外层包裹.container或.container-fluid，.row自带的左右负margin会导致页面出现横向滚动条，也可能干扰背景展示，修改body内的结构为：

<div class="container-fluid p-0">
  <div class="row g-0">
    <div class="col-sm-6"><img src="https://via.placeholder.com/150/FF0000/808080" class="img-fluid"></div>
    <div class="col-sm-6">50%</div>
  </div>
</div>

如果修改后仍不生效，可以打开浏览器开发者工具的网络面板，检查estilo.css文件是否加载成功，避免路径错误导致样式未生效。

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