【问题标题】: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 包装在 &lt;style type="text/css"&gt;...&lt;/style&gt; 标记中。

      这应该在您页面上的&lt;head&gt;...&lt;/head&gt; 标记中:

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

      【讨论】:

        【解决方案4】:

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

        body {
          padding: 0;
          margin: 0;
        }
        

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

        【讨论】:

        • 这行不通...
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2010-09-30
        • 2016-04-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-06-23
        • 1970-01-01
        相关资源
        最近更新 更多