HTML/CSS新手求助：不使用<canvas id>如何设置网页背景色？

如果你用#canvas的CSS没生效，可以试试下面这些方法来设置网页背景：

• 给body元素设置背景色
  这是最常用的方式，因为body是网页的主体容器，默认会覆盖整个视口区域。代码如下：

  body {
    background-color: black;
  }
  

  如果页面有默认边距导致背景没铺满，可加上margin: 0; padding: 0;清除默认样式：

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

• 同时设置html和body元素
  有些情况下body可能没有占满整个页面高度，同时设置html和body能确保背景完全覆盖：

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

• 用容器包裹内容并设置背景
  如果只需要给特定区域设置背景，或者页面布局有嵌套容器，可以给最外层容器添加样式：
  先在HTML中添加容器：

  <div class="page-wrapper">
    <!-- 所有页面内容放在这里 -->
  </div>
  

  然后写CSS：

  .page-wrapper {
    background-color: black;
    width: 100%;
    min-height: 100vh; /* 确保容器至少占满视口高度 */
  }
  

• 内联样式快速测试
  要是只是临时测试效果，可以直接在body标签里加内联样式：

  <body style="background-color: black;">
  

  不过这种方式不利于代码维护，正式项目不推荐使用。

另外提一句：你之前的#canvas样式没生效，大概率是这几个原因——页面里没有id为canvas的元素、选择器优先级被其他样式覆盖，或者canvas元素尺寸太小，看不到背景效果。

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