【Java Web学习 | 第四篇】CSS(3) - 背景Background2026最新版恭喜你完成元素显示模式现在进入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-imageurl(bg.jpg),linear-gradient()设置背景图片或渐变英雄区、卡片background-repeatno-repeat,repeat-x,repeat图片重复方式控制平铺background-positioncenter,top left,50% 50%图片位置精确对齐background-sizecover,contain,100% 100%图片缩放方式最重要全屏背景、响应式background-attachmentfixed,scroll,local背景是否随页面滚动视差效果background-clipborder-box,padding-box,content-box背景绘制区域高级控制background-originborder-box,padding-box,content-box背景图片定位原点与 clip 配合最强简写形式日常开发 90% 情况够用background:color image repeat position/size attachment;2. 完整实用示例直接复制运行创建一个background-demo.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleCSS 背景演示 - Java Web 项目常用/titlestyle*{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 10pxrgba(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 30pxrgba(0,0,0,0.1);background:linear-gradient(145deg,#ffffff,#f8f9fa);}/style/headbodysectionclasssection1h1纯色背景区域/h1/sectionsectionclasssection2h1线性渐变背景现代 UI 标配/h1/sectionsectionclassherodivh1stylefont-size:3.5rem;欢迎来到 Java Web 项目/h1pstylefont-size:1.4rem;背景使用 background-size: cover fixed/p/div/sectionsectionclassmulti-bgh2多层背景 半透明遮罩/h2p常用于登录页、宣传页/p/sectiondivclasscardh3卡片式背景/h3p在 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 全栈之路越来越稳