如何使彩色背景充满答案

【问题标题】：How to make color background full如何使彩色背景充满
【发布时间】：2022-01-22 15:34:30
【问题描述】：

如何使背景颜色触及每一端。我对下面的html和CSS相当陌生，我有我为背景输入的代码。请让我确切地知道我需要在我的代码中更改什么。我知道其中一些需要更改我只是不知道我需要更改什么。

.black {
  background-color: black;
  font-size: 20px;
}

<div class="black">
  <hr>
  <h2 class="white">Documentation Examples</h2>

  <a>
    <ul class="documentations">
      <li>
        Savings or Checkings Accounts
      </li>
      <li>
        Stocks, Dividends, Bonds or Debentures
      </li>
      <li>
        Life Insurance Accounts
      </li>
      <li>
        Escrow Accounts
      </li>
      <li>
        Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
      </li>
      <li>
        Safe Deposit Box Contents
      </li>
      <li>
        Business Accounts
      </li>
      <li>
        Corporation/Business Entity/Partnership
      </li>
      <li>
        Governmental Agency Accounts
      </li>
      <li>
        Miscellaneous Accounts
      </li>
    </ul>
    </nav>
  </a>
  <br>
  <br>
  <br>

</div>

enter image description here

【问题讨论】：

标签： html css background

【解决方案1】：

将您的代码嵌套在body 中，并在样式表中使用margin: 0;。见下文。

.black {
  background-color: black;
  font-size: 20px;
}

body {
  margin: 0;
}

li {
  color: white;
}

<body>
<div class="black">
  <hr>
  <h2 class="white">Documentation Examples</h2>

  <a>
    <ul class="documentations">
      <li>
        Savings or Checkings Accounts
      </li>
      <li>
        Stocks, Dividends, Bonds or Debentures
      </li>
      <li>
        Life Insurance Accounts
      </li>
      <li>
        Escrow Accounts
      </li>
      <li>
        Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
      </li>
      <li>
        Safe Deposit Box Contents
      </li>
      <li>
        Business Accounts
      </li>
      <li>
        Corporation/Business Entity/Partnership
      </li>
      <li>
        Governmental Agency Accounts
      </li>
      <li>
        Miscellaneous Accounts
      </li>
    </ul>
    </nav>
  </a>
  <br>
  <br>
  <br>

</div>
</body>

【讨论】：

它仍然没有覆盖上半部分。请考虑修复它。
@TrueAlpha touch 每个端意味着左右
你能解释清楚一点吗。我不明白。
@TrueAlpha SO sn-ps 默认情况下会渲染主体（无论是否包含）。所以你需要声明body { margin: 0; } 从左到右到达。如果 OP 想要删除顶部间距，他们可以使用 .black { position: absolute; top: 0; width: 100vw;}

【解决方案2】：

div 标签总是有边距，你必须用margin : 0 删除它。如果你想在整个屏幕上显示黑色background-color，你必须给height: 100vh

.black {
  background-color: black;
  font-size: 20px;
  color: white; 
  height: 100vh;
}

.body {
  margin: 0;
  padding: 0;
}

【讨论】：

【解决方案3】：

您的代码是正确的，但您需要将 css 包装在 <style type="text/css">...</style> 标记中。

这应该在您页面上的<head>...</head> 标记中：

<head>
    <!-- title and other things go here -->
    <style type="text/css">
        .black {
            background-color: black;
            font-size: 20px;
        }
    </style>
</head>

【讨论】：

【解决方案4】：

您应该通过添加margin:0 和padding:0 来删除所有的填充和边距。像这样：

body {
  padding: 0;
  margin: 0;
}

这将删除所有的内边距和边距，以便完全覆盖背景。

【讨论】：

这行不通...