<body>标签CSS背景色未正常显示问题求助

你的body背景色不显示有两个核心原因：

1. CSS加载顺序冲突：你先引入了自定义的style.css，再加载Bootstrap的CSS文件。Bootstrap默认给body设置了背景样式，后加载的CSS优先级更高，导致你的背景色被覆盖。
2. body高度坍缩：页面中仅包含绝对定位的#clock元素，绝对定位会脱离文档流，使得body高度变为0，即便背景色生效也无法铺满整个视口。

推荐方案：调整加载顺序 + 确保视口高度覆盖 #

1. 修改HTML的CSS引入顺序 #

把自定义style.css放在Bootstrap CSS之后，让你的样式拥有更高优先级：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

2. 更新CSS，让html和body占满视口 #

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body{
    height: 100%;
    margin: 0;
    background-color: #141516;
}

#clock {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    color: rgb(168, 11, 134);
}

@media (max-width: 600px) {
    #clock {
        font-size: 40px;
    }
}

@media (max-width: 400px) {
    #clock {
        font-size: 30px;
    }
}

备选方案：强制提升优先级（不推荐） #

如果不想调整加载顺序，可以给body背景色添加!important强制覆盖，但这种方式会破坏CSS优先级规则，仅作为临时应急手段：

body{
    background-color: #141516 !important;
    height: 100%;
    margin: 0;
}

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