网页设计中设置页面背景的方法主要有背景颜色、背景图片及两者结合使用。首先设置背景颜色可用 css 的 background-color 属性，支持颜色名称、rgb、hsl 或十六进制值，适合简洁风格；其次设置背景图片通过 background-image 属性，并配合 background-repeat、background-size、background-position 和 background-attachment 等属性优化显示效果；最后可同时使用背景颜色与图片，利用 rgba 颜色叠加半透明层或简写属性实现遮罩效果以增强可读性，适用于图文内容较多的页面。
设置页面背景是网页设计中最基础也最常用的操作之一，主要可以通过设置背景颜色或背景图片来实现。html 本身不直接控制样式，而是通过 css 来完成这些设置。下面我们就来看看具体怎么操作。
设置背景颜色
背景颜色是最简单的页面背景设置方式，适用于大多数需要简洁风格的网站。
要设置背景颜色，可以使用 CSS 的 background-color 属性：
立即学习“前端免费学习笔记（深入）”；
body { background-color: #f0f0f0; }
你也可以使用颜色名称（如 red、blue）、RGB 值（如 rgb(255, 0, 0)）或 HSL 值（如 hsl(0, 100%, 50%)）。
小技巧：浅灰色背景（比如 #f5f5f5）通常比纯白更柔和，适合正文阅读类网站。
设置背景图片
如果想让页面看起来更生动，可以用背景图片。设置方法也很简单，用的是 background-image 属性：
body { background-image: url('bg.jpg'); }
这里 ‘bg.jpg’ 是你的图片路径，可以是相对路径或者绝对 URL。
不过只加图片还不够，通常还需要配合其他属性调整显示效果，比如：
- background-repeat: 控制图片是否重复，默认是平铺。
- background-size: 可以设为 cover 让图片自适应屏幕大小。
- background-position: 设置图片起始位置，常用 center。
- background-attachment: 设置滚动方式，比如固定不动（fixed）。
例如完整写法：
body { background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
这样就能做出一个视觉上比较舒服的全屏背景图了。
背景颜色与图片同时使用
有时候我们希望在有背景图的基础上再叠加一层颜色，增强对比度或遮罩效果。这时候可以用 background 简写属性，也可以使用 rgba 颜色来叠加半透明层。
举个例子：
body { background-image: url('bg.jpg'); background-color: rgba(255, 255, 255, 0.5); /* 白色半透明 */ background-blend-mode: lighten; /* 混合模式可选 */ }
这种方式适合文字内容较多的页面，可以让文字更清晰易读。
基本上就这些设置方式了。背景颜色和图片的搭配其实挺灵活，关键是根据网站主题选择合适的配色和图片风格，别太花哨就行。
