【Java Web学习 | 第四篇】CSS(3) – 背景（Background）（2026最新版）
恭喜你完成元素显示模式！现在进入 CSS 背景，这是美化页面最常用、最有视觉冲击力的部分之一。
背景属性可以让你的 Java Web 项目从“素描”瞬间变成“现代 UI”，尤其在后台管理系统、营销落地页、企业官网中非常实用。
2026 年，CSS 背景依然以 background 简写属性为核心，同时新增了 background-size: cover、background-attachment: fixed 等成熟技巧，以及 background-image 与渐变、多层背景的组合使用。
1. 背景核心属性一览（推荐记忆顺序）
| 属性 | 常用值示例 | 作用说明 | 推荐使用场景 |
|---|---|---|---|
background-color | #f8f9fa, rgba(0,123,255,0.8) | 背景颜色（支持透明） | 所有容器 |
background-image | url('bg.jpg'), linear-gradient() | 设置背景图片或渐变 | 英雄区、卡片 |
background-repeat | no-repeat, repeat-x, repeat | 图片重复方式 | 控制平铺 |
background-position | center, top left, 50% 50% | 图片位置 | 精确对齐 |
background-size | cover, contain, 100% 100% | 图片缩放方式（最重要！） | 全屏背景、响应式 |
background-attachment | fixed, scroll, local | 背景是否随页面滚动 | 视差效果 |
background-clip | border-box, padding-box, content-box | 背景绘制区域 | 高级控制 |
background-origin | border-box, padding-box, content-box | 背景图片定位原点 | 与 clip 配合 |
最强简写形式（日常开发 90% 情况够用）：
background:
color
image
repeat
position/size
attachment;
2. 完整实用示例（直接复制运行）
创建一个 background-demo.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 背景演示 - Java Web 项目常用</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", Arial, sans-serif; }
/* 1. 纯色背景 */
.section1 {
height: 300px;
background-color: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* 2. 渐变背景（2026 最流行） */
.section2 {
height: 400px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* 3. 图片背景 + cover（推荐写法） */
.hero {
height: 100vh; /* 视口高度 */
background-image: url('https://picsum.photos/id/1015/1920/1080');
background-size: cover; /* 关键：图片铺满不拉伸 */
background-position: center; /* 居中 */
background-repeat: no-repeat;
background-attachment: fixed; /* 视差滚动效果 */
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
/* 4. 多层背景（高级技巧） */
.multi-bg {
height: 300px;
background:
linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), /* 遮罩层 */
url('https://picsum.photos/id/237/800/600') center/cover no-repeat;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 5. 卡片背景（项目中常用） */
.card {
width: 320px;
padding: 24px;
margin: 20px auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background: linear-gradient(145deg, #ffffff, #f8f9fa);
}
</style>
</head>
<body>
<section class="section1">
<h1>纯色背景区域</h1>
</section>
<section class="section2">
<h1>线性渐变背景（现代 UI 标配）</h1>
</section>
<section class="hero">
<div>
<h1 style="font-size: 3.5rem;">欢迎来到 Java Web 项目</h1>
<p style="font-size: 1.4rem;">背景使用 background-size: cover + fixed</p>
</div>
</section>
<section class="multi-bg">
<h2>多层背景 + 半透明遮罩</h2>
<p>常用于登录页、宣传页</p>
</section>
<div class="card">
<h3>卡片式背景</h3>
<p>在 Java Web 管理系统中，这种带轻微渐变和圆角的卡片非常常见。</p>
</div>
</body>
</html>
推荐图片来源（开发时可用）：
- https://picsum.photos/ （随机图片）
- https://unsplash.com （高质量免费图）
3. 2026 年最佳实践
- 移动端优先：先写小屏幕背景，再用媒体查询调整大屏。
- 性能优化：
- 使用
background-size: cover而不是100% 100%（避免图片变形）。 - 大图建议用 WebP 格式 + 压缩。
- 视差效果（
fixed）在移动端慎用（耗性能）。
- 渐变神器：
linear-gradient()：线性渐变radial-gradient()：径向渐变conic-gradient()：锥形渐变（2026 新宠）
- 暗黑模式支持：
@media (prefers-color-scheme: dark) {
.hero { background-image: url('dark-bg.jpg'); }
}
- 与语义化标签配合：
<header>、<section>、<main>等语义标签 + 背景，能做出清晰的页面分区。
4. 小练习（建议立即动手）
- 把上一篇文章的个人简历页面加上英雄区背景（使用
background-size: cover）。 - 为登录表单页面创建一个全屏渐变背景 + 居中卡片（参考上面
.multi-bg）。 - 实现一个导航栏：透明背景 + hover 时背景变色 + 轻微渐变。
- 用多层背景做出一个带遮罩的图片卡片。
提示：练习时多在浏览器 DevTools 中实时修改 background-size、background-position、background-attachment 的值，观察效果。
下一篇文章预告：《【Java Web学习 | 第五篇】CSS(4) – Flexbox 布局（现代布局核心）》
我们将学习 Flexbox（弹性布局），这是 2026 年最重要的一维布局方案，能轻松实现水平/垂直居中、等高卡片、响应式导航等常见需求，强烈建议重点掌握！
需要我提供以下内容吗？直接回复对应序号：
- 完整登录页背景示例（含渐变 + 卡片 + 表单）
- 多张背景图片叠加演示（多层背景进阶）
- 背景属性速查表（PDF风格整理）
- 直接进入 Flexbox（下一篇文章完整版）
或者告诉我具体需求（如“给导航栏加毛玻璃背景”），我立刻给你定制代码！
继续保持练习节奏，你的 CSS 功底正在快速提升，Java Web 全栈之路越来越稳！🚀
