如何使彩色背景充满
Posted
技术标签:
【中文标题】如何使彩色背景充满【英文标题】：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
【问题讨论】：
【参考方案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;
这将删除所有的内边距和边距，以便完全覆盖背景。
【讨论】：
这行不通...以上是关于如何使彩色背景充满的主要内容，如果未能解决你的问题，请参考以下文章