Bootstrap 4.4.1环境下body背景设为黑色未生效，出现白色区域

原因分析 #

Bootstrap 4的默认样式会给<html>元素设置background-color: #fff，同时你的body {background: black;}可能因优先级不足被框架样式覆盖，或是页面滚动时露出html层的背景色，导致视觉上仍存在白色区域。

解决方案 #

1. 确保自定义样式优先级更高 #

要么使用更具体的选择器，要么临时用!important快速验证（不推荐滥用，仅用于排查）：

body {
  background-color: black !important;
}

2. 同时设置html与body的背景色 #

直接覆盖html和body的背景样式，确保整个页面背景统一，同时消除默认边距：

html, body {
  background-color: black;
  margin: 0;
  padding: 0;
}

3. 检查样式加载顺序 #

保证你的自定义CSS文件在Bootstrap CSS之后引入，这样自定义样式才能覆盖框架默认样式：

<!-- 先引入Bootstrap样式 -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 再引入自定义样式 -->
<link rel="stylesheet" href="your-custom.css">

4. 排查其他覆盖样式 #

用浏览器开发者工具（F12）查看body元素的样式面板，检查是否有更高优先级的选择器（比如嵌套选择器）覆盖了你的设置，针对性调整选择器权重即可。

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