覆盖整个页面的背景（CSS）答案

【问题标题】：Background covering the whole page (CSS)覆盖整个页面的背景（CSS）
【发布时间】：2022-02-13 19:57:36
【问题描述】：

我刚从 VSC 切换到 Adobe Dreamweaver，不知道是否应该保留它；但这不是重点。

当我尝试为某些文本添加背景时，它会用背景填充整个屏幕，如果我尝试更改宽度，它只会添加到填充整个屏幕的背景。

我不知道这是用户错误，HTML/CSS 在一夜之间发生了变化，还是因为我的屏幕顶部的 Dreamweaver 显示框问题

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}

.Container {
  padding: 25%;
  padding-left: 50%;
  padding-right: 50%;
  font-family: comfortaa;
  font-style: normal;
  font-weight: 600;
  color: white;
  background: #00C3FF;
  margin: 0;
}

body {
  background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>index</title>
  <link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
  <script>
    var __adobewebfontsappname__ = "dreamweaver"
  </script>
  <script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>

</head>

<body>

  <div class="Container">
    <h1>Hello</h1>
  </div>
</body>

</html>

ps：如果您需要我得到的结果，请告诉我。

【问题讨论】：

标签： html css dreamweaver

【解决方案1】：

您可以通过添加来更改文本背景颜色，而不是使用该类背景颜色：rgb(255, 236, 139) 在h1标签中

演示：

你的文字

【讨论】：

【解决方案2】：

如果您将 css 应用于 H1 标签，它应该会按预期工作：

.Container h1{}

您错误地使用了填充属性。 Reference

正确的语法：padding: top right bottom left

padding:0 50% 0 50%;

所以 css 应该是：

.Container{ margin: 0; }

.Container h1{  
  padding:0 50% 0 50%;
  font-family: comfortaa;
  font-style: normal;
  font-weight: 600;
  color: white;
  background: #00C3FF;
}

【讨论】：