如何为HTML页面添加蓝色背景？求助实现方法

你可以通过CSS给页面或指定容器添加蓝色背景，以下是几种实用方案：

1. 给整个页面（body）添加背景 #

直接在<style>区块里为body设置background-color属性，就能让整个页面铺满蓝色背景：

<html lang="en">
<head>
<title>Success Page</title>
<style>
body {
  /* 这里用#1E90FF（道奇蓝）为例，可替换成任意蓝色值 */
  background-color: #1E90FF;
  margin: 0; /* 清除body默认边距，避免出现白边 */
}
h1 {
  font-size: 2cm;
  text-align: center;
}
p {
  font-size: 1cm;
  padding: 20px;
}
</style>
</head>
<body>
 <div class="container">
 <h1>Success Page</h1>
<p>Congratulations your registration was successful!!!</p>
<a href="index.html"><button class="btn btn--pill btn--green" type="submit">OK</button></a>
 </div>
</body>
</html>

2. 仅给内容容器（.container）添加背景 #

如果只想让核心内容区域有蓝色背景，给.container设置样式即可：

<html lang="en">
<head>
<title>Success Page</title>
<style>
h1 {
  font-size: 2cm;
  text-align: center;
}
p {
  font-size: 1cm;
  padding: 20px;
}
.container {
  background-color: #4682B4; /* 钢蓝色 */
  min-height: 100vh; /* 让容器占满整个视口高度 */
  padding: 20px;
}
</style>
</head>
<body>
 <div class="container">
 <h1>Success Page</h1>
<p>Congratulations your registration was successful!!!</p>
<a href="index.html"><button class="btn btn--pill btn--green" type="submit">OK</button></a>
 </div>
</body>
</html>

补充提示 #

• 蓝色的取值方式多样：可以用颜色名称（如blue）、十六进制值（如#0000FF）、RGB/RGBA（如rgba(0,0,255,0.8)，最后一位数值控制透明度），按需选择即可。
• 若设置body背景后出现边缘白边，记得加上body { margin: 0; }清除浏览器默认样式。

内容的提问来源于stack exchange，提问作者Connor smith