可通过CSS的background属性设置纯色或渐变背景：一、用background-color设纯色；二、用background-image与linear-gradient设线性渐变；三、用background复合属性整合渐变与尺寸定位；四、用radial-gradient设径向渐变；五、用媒体查询实现响应式适配。
如果您希望为HTML5页面设置纯色或渐变背景，可通过CSS的background属性实现。以下是具体操作方法：
一、使用background-color设置纯色背景
background-color属性用于为元素指定单一颜色作为背景，适用于body、div等任意块级或行内元素。该方式简洁直接，兼容性好，可精确控制颜色值。
1、在
2、写入background-color声明，并指定颜色值，支持关键字（如red）、十六进制（如#336699）、RGB（如rgb(51, 102, 153)）或RGBA（如rgba(51, 102, 153, 0.8)）。
立即学习“前端免费学习笔记（深入）”；
3、确保CSS规则优先级足够高，避免被其他样式覆盖。
4、在HTML文档中验证背景是否正常渲染，注意：background-color不会影响透明度以外的其他视觉层次，若需叠加图片或渐变，请改用background属性。
二、使用background-image配合linear-gradient设置线性渐变背景
linear-gradient()函数可在background-image中生成平滑过渡的线性色彩渐变，支持多色停靠点与方向控制，适用于现代浏览器。
1、在CSS中为目标元素设置background-image属性，值为linear-gradient()函数。
2、在括号内指定渐变方向（如to right、135deg）及颜色序列（如#ff9a9e, #fad0c4）。
3、可叠加多个渐变层，用逗号分隔，但需注意层级顺序由前到后堆叠。
4、必须省略background-color声明，否则可能遮盖渐变效果；若需半透明渐变，应在颜色值中使用rgba()。
三、使用background属性一次性设置渐变与背景尺寸/位置
background是复合属性，可同时定义渐变、背景尺寸、重复方式与定位，减少代码冗余并提升可维护性。
1、在background中先写linear-gradient()或radial-gradient()作为第一层背景图像。
2、接着添加/分隔符，后接尺寸值（如100% 100%）和定位值（如center center）。
3、末尾添加no-repeat以防止渐变图案重复平铺。
4、当使用background复合写法时，务必确保gradient表达式位于最左侧，否则可能被后续background-image覆盖。
四、使用radial-gradient设置径向渐变背景
radial-gradient()创建从中心点向外扩散的圆形或椭圆形渐变，适合强调焦点区域或营造立体感。
1、在background-image中调用radial-gradient()函数。
2、指定形状（circle或ellipse）、大小（closest-side、farthest-corner等）及颜色节点。
3、可混合使用关键字与数值单位，例如radial-gradient(circle at 30% 40%, #fff, #000)。
4、注意：径向渐变默认以元素中心为起点，若需偏移，必须显式写出at关键词及坐标。
五、为不同屏幕尺寸适配背景样式
通过媒体查询可针对视口宽度调整背景颜色或渐变参数，确保响应式体验一致。
1、在CSS中使用@media规则包裹背景相关声明。
2、设定断点（如max-width: 768px），并在其中重写background或background-color值。
3、可单独修改渐变角度、颜色饱和度或尺寸，以适应小屏阅读习惯。
4、必须将移动优先的背景样式置于媒体查询外，再用@media覆盖，避免未触发断点时无背景显示。
