设置html页面背景色主要通过css实现，包含三种方法：1.内联样式直接在标签添加style属性；2.内部样式表在head中用style标签定义；3.外部样式表通过link标签引入独立css文件。颜色选择应考虑可读性与设计风格，浅色适合阅读，深色现代感强，可用adobe color生成配色方案，并通过webaim contrast checker确保对比度达标。此外，可通过background-image设置背景图片，配合background-repeat与background-size控制显示效果。css3还支持渐变背景，使用linear-gradient()实现线性渐变，radial-gradient()实现径向渐变，可自定义方向、颜色与停止点，但应避免过度使用影响体验。
设置HTML页面的背景色，主要通过CSS来实现，可以让你快速改变网页的视觉风格。
解决方案
设置HTML页面的背景色，通常有三种主要方法：内联样式、内部样式表和外部样式表。
1. 内联样式:
立即学习“前端免费学习笔记（深入）”；
直接在HTML标签中使用style属性来设置background-color。这种方法简单直接，但不利于维护和复用。
<body style="max-width:90%"> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body>
2. 内部样式表:
在HTML文档的<head>部分使用<style>标签来定义CSS规则。这种方法将样式与HTML结构分离，便于管理。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>3. 外部样式表:
将CSS规则保存在单独的.css文件中，然后在HTML文档中通过<link>标签引用该文件。这是推荐的做法，因为它实现了样式与HTML结构的完全分离，方便维护和复用。
首先，创建一个名为styles.css的文件，内容如下：
body {
background-color: lightblue;
}然后，在HTML文档中引用该文件：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
如何选择合适的背景颜色？
颜色的选择很大程度上取决于网站的整体设计和目标用户。一般来说，浅色背景更易于阅读，深色背景则更具现代感。可以使用在线颜色选择工具，比如Adobe Color，来生成配色方案。另外，要考虑到可访问性，确保文本与背景颜色之间有足够的对比度，可以使用WebAIM Contrast Checker来检查。
除了颜色，还可以设置背景图片吗？
当然可以。除了background-color，CSS还提供了background-image属性来设置背景图片。你可以使用URL指定图片的路径。
body {
background-image: url("images/background.jpg");
background-repeat: no-repeat; /* 防止图片重复 */
background-size: cover; /* 让图片覆盖整个背景 */
}background-repeat属性控制图片如何重复，background-size属性控制图片的大小。cover值会让图片尽可能覆盖整个背景区域，可能会裁剪图片。contain值则会完整显示图片，可能会留白。
如何实现背景颜色渐变？
CSS3提供了linear-gradient()和radial-gradient()函数来实现线性渐变和径向渐变。
线性渐变:
body {
background: linear-gradient(to right, red , yellow); /* 从左到右的红黄渐变 */
}径向渐变:
body {
background: radial-gradient(circle, red, yellow, green); /* 从中心向外的红黄绿渐变 */
}你可以调整渐变的方向、颜色和停止点，以创建各种各样的渐变效果。渐变效果可以为网站增加视觉吸引力，但也要注意不要过度使用，以免影响用户体验。
