1. 引言在 CSS 中盒子模型Box Model是页面布局的基础而背景background则是让盒子好看的关键。理解盒子模型决定了元素占据多大空间理解背景属性决定了这块空间如何被填充。本文从盒子模型出发系统梳理background系列常见属性并给出可直接运行的示例。2. 盒子模型回顾每个元素都可以看作一个矩形盒子由内到外分为四层content内容区文字、图片等实际内容占据的区域padding内边距内容与边框之间的距离border边框盒子的边界margin外边距盒子与其他盒子之间的距离.box{width:200px;height:100px;padding:16px;border:2px solid #333;margin:20px;box-sizing:border-box;/* 让 width 包含 padding 和 border */}注意background默认绘制范围是content padding border但不包括margin。这一点在设置背景时非常关键。3. background 常见属性总览属性作用常用值background-color背景颜色#fff、rgba(0,0,0,.5)、transparentbackground-image背景图片url(...)、linear-gradient(...)background-repeat是否平铺repeat、no-repeat、repeat-x、repeat-ybackground-position图片位置center、left top、50% 50%、10px 20pxbackground-size图片尺寸cover、contain、100% auto、200px 100pxbackground-attachment是否随滚动scroll、fixed、localbackground-origin定位原点padding-box、border-box、content-boxbackground-clip绘制裁剪区域border-box、padding-box、content-box、textbackground-blend-mode多层背景混合模式normal、multiply、overlay等4. 各属性详解4.1 background-color设置纯色背景是最常用的属性。.card{background-color:#f5f7fa;}.card-transparent{background-color:rgba(0,0,0,0.5);/* 半透明黑色 */}4.2 background-image支持图片、渐变也可以同时设置多层背景。.hero{background-image:url(./banner.jpg);}.gradient{background-image:linear-gradient(135deg,#667eea,#764ba2);}/* 多层背景上层渐变 下层图片 */.multi{background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(./banner.jpg);}4.3 background-repeat控制背景图是否平铺。.no-repeat{background-image:url(./logo.png);background-repeat:no-repeat;}.repeat-x{background-image:url(./pattern.png);background-repeat:repeat-x;/* 只在水平方向平铺 */}4.4 background-position设置背景图在盒子中的位置支持关键字、百分比和长度值。.center{background-position:center;/* 水平垂直居中 */}.top-right{background-position:right top;}.offset{background-position:20px 40px;/* 距左 20px距上 40px */}.percent{background-position:50% 50%;/* 百分比定位 */}4.5 background-size控制背景图的缩放方式cover与contain是最常用的两个值。.cover{background-image:url(./banner.jpg);background-size:cover;/* 铺满容器可能裁剪图片 */}.contain{background-image:url(./banner.jpg);background-size:contain;/* 完整显示图片可能留白 */}.fixed-size{background-size:200px 100px;}4.6 background-attachment控制背景图是否随页面滚动。.parallax{background-image:url(./banner.jpg);background-attachment:fixed;/* 视差效果背景固定内容滚动 */}4.7 background-origin 与 background-clip这两个属性常被混淆background-origin背景图定位的起点从哪一层开始计算位置background-clip背景绘制/裁剪的范围画到哪一层为止.origin-padding{background-origin:padding-box;/* 默认值 */}.origin-content{background-origin:content-box;}.clip-text{background-image:linear-gradient(90deg,#ff6b6b,#4ecdc4);background-clip:text;-webkit-background-clip:text;color:transparent;/* 渐变文字效果 */}4.8 background 简写background简写可以一次性设置多个属性顺序较灵活但位置与尺寸需要写成position / size的形式。.shorthand{background:#f5f7faurl(./banner.jpg)no-repeat center / cover;}/* 等价于 */.shorthand-longhand{background-color:#f5f7fa;background-image:url(./banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;}使用简写时未显式声明的子属性会被重置为初始值因此覆盖样式时要小心。5. 综合示例下面是一个常见的卡片 背景图组合示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/style.card{width:320px;padding:24px;border:1px solid #e5e7eb;border-radius:12px;background-color:#ffffff;background-image:url(https://picsum.photos/320/180);background-repeat:no-repeat;background-position:center top;background-size:100% auto;box-sizing:border-box;}.card h3{margin:160px 0 8px;font-size:18px;}.card p{margin:0;color:#6b7280;font-size:14px;}/style/headbodydivclasscardh3背景图卡片/h3pbackground 系列属性的综合应用。/p/div/body/html6. 常见坑与最佳实践背景不覆盖 marginbackground只绘制到border-boxmargin区域永远是透明的。cover与contain的选择需要铺满容器用cover需要完整展示图片用contain。简写会重置background: red;会把background-image等一并重置覆盖样式时优先用长写属性。渐变文字background-clip: text需要配合color: transparent并建议加上-webkit-前缀兼容。性能大图 background-attachment: fixed在移动端可能引起卡顿谨慎使用。7. 总结盒子模型决定了元素的尺寸与层级background系列属性决定了这块区域如何被填充。掌握background-color、background-image、background-repeat、background-position、background-size这五个核心属性就能覆盖绝大多数实际场景再配合background-origin、background-clip与多层背景可以实现渐变文字、视差滚动等进阶效果。 
长河君 · 2026/11/5 5:35:52 · 阅读 1.2k CSS 盒子模型与背景（background）常见属性详解
1. 引言在 CSS 中盒子模型Box Model是页面布局的基础而背景background则是让盒子好看的关键。理解盒子模型决定了元素占据多大空间理解背景属性决定了这块空间如何被填充。本文从盒子模型出发系统梳理background系列常见属性并给出可直接运行的示例。2. 盒子模型回顾每个元素都可以看作一个矩形盒子由内到外分为四层content内容区文字、图片等实际内容占据的区域padding内边距内容与边框之间的距离border边框盒子的边界margin外边距盒子与其他盒子之间的距离.box{width:200px;height:100px;padding:16px;border:2px solid #333;margin:20px;box-sizing:border-box;/* 让 width 包含 padding 和 border */}注意background默认绘制范围是content padding border但不包括margin。这一点在设置背景时非常关键。3. background 常见属性总览属性作用常用值background-color背景颜色#fff、rgba(0,0,0,.5)、transparentbackground-image背景图片url(...)、linear-gradient(...)background-repeat是否平铺repeat、no-repeat、repeat-x、repeat-ybackground-position图片位置center、left top、50% 50%、10px 20pxbackground-size图片尺寸cover、contain、100% auto、200px 100pxbackground-attachment是否随滚动scroll、fixed、localbackground-origin定位原点padding-box、border-box、content-boxbackground-clip绘制裁剪区域border-box、padding-box、content-box、textbackground-blend-mode多层背景混合模式normal、multiply、overlay等4. 各属性详解4.1 background-color设置纯色背景是最常用的属性。.card{background-color:#f5f7fa;}.card-transparent{background-color:rgba(0,0,0,0.5);/* 半透明黑色 */}4.2 background-image支持图片、渐变也可以同时设置多层背景。.hero{background-image:url(./banner.jpg);}.gradient{background-image:linear-gradient(135deg,#667eea,#764ba2);}/* 多层背景上层渐变 下层图片 */.multi{background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(./banner.jpg);}4.3 background-repeat控制背景图是否平铺。.no-repeat{background-image:url(./logo.png);background-repeat:no-repeat;}.repeat-x{background-image:url(./pattern.png);background-repeat:repeat-x;/* 只在水平方向平铺 */}4.4 background-position设置背景图在盒子中的位置支持关键字、百分比和长度值。.center{background-position:center;/* 水平垂直居中 */}.top-right{background-position:right top;}.offset{background-position:20px 40px;/* 距左 20px距上 40px */}.percent{background-position:50% 50%;/* 百分比定位 */}4.5 background-size控制背景图的缩放方式cover与contain是最常用的两个值。.cover{background-image:url(./banner.jpg);background-size:cover;/* 铺满容器可能裁剪图片 */}.contain{background-image:url(./banner.jpg);background-size:contain;/* 完整显示图片可能留白 */}.fixed-size{background-size:200px 100px;}4.6 background-attachment控制背景图是否随页面滚动。.parallax{background-image:url(./banner.jpg);background-attachment:fixed;/* 视差效果背景固定内容滚动 */}4.7 background-origin 与 background-clip这两个属性常被混淆background-origin背景图定位的起点从哪一层开始计算位置background-clip背景绘制/裁剪的范围画到哪一层为止.origin-padding{background-origin:padding-box;/* 默认值 */}.origin-content{background-origin:content-box;}.clip-text{background-image:linear-gradient(90deg,#ff6b6b,#4ecdc4);background-clip:text;-webkit-background-clip:text;color:transparent;/* 渐变文字效果 */}4.8 background 简写background简写可以一次性设置多个属性顺序较灵活但位置与尺寸需要写成position / size的形式。.shorthand{background:#f5f7faurl(./banner.jpg)no-repeat center / cover;}/* 等价于 */.shorthand-longhand{background-color:#f5f7fa;background-image:url(./banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;}使用简写时未显式声明的子属性会被重置为初始值因此覆盖样式时要小心。5. 综合示例下面是一个常见的卡片 背景图组合示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/style.card{width:320px;padding:24px;border:1px solid #e5e7eb;border-radius:12px;background-color:#ffffff;background-image:url(https://picsum.photos/320/180);background-repeat:no-repeat;background-position:center top;background-size:100% auto;box-sizing:border-box;}.card h3{margin:160px 0 8px;font-size:18px;}.card p{margin:0;color:#6b7280;font-size:14px;}/style/headbodydivclasscardh3背景图卡片/h3pbackground 系列属性的综合应用。/p/div/body/html6. 常见坑与最佳实践背景不覆盖 marginbackground只绘制到border-boxmargin区域永远是透明的。cover与contain的选择需要铺满容器用cover需要完整展示图片用contain。简写会重置background: red;会把background-image等一并重置覆盖样式时优先用长写属性。渐变文字background-clip: text需要配合color: transparent并建议加上-webkit-前缀兼容。性能大图 background-attachment: fixed在移动端可能引起卡顿谨慎使用。7. 总结盒子模型决定了元素的尺寸与层级background系列属性决定了这块区域如何被填充。掌握background-color、background-image、background-repeat、background-position、background-size这五个核心属性就能覆盖绝大多数实际场景再配合background-origin、background-clip与多层背景可以实现渐变文字、视差滚动等进阶效果。