html怎么设置页面背景？背景颜色与图片设置

网页设计中设置页面背景的方法主要有背景颜色、背景图片及两者结合使用。首先设置背景颜色可用 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。

稿定抠图

AI自动消除图片背景

30

查看详情

不过只加图片还不够，通常还需要配合其他属性调整显示效果，比如：

• 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; /* 混合模式可选 */
}

这种方式适合文字内容较多的页面，可以让文字更清晰易读。

基本上就这些设置方式了。背景颜色和图片的搭配其实挺灵活，关键是根据网站主题选择合适的配色和图片风格，别太花哨就行。

以上就是html怎么设置页面背景？背景颜色与图片设置的详细内容，更多请关注php中文网其它相关文章！