CSS 背景属性完全指南：从颜色到简写，一次搞懂

在网页开发中背景background​ 是最常用的 CSS 特性之一。无论是纯色底色、纹理平铺还是全屏大图、视差滚动都离不开背景属性家族。本文将系统梳理 7 个背景相关属性并给出实用案例帮你彻底掌握。 一、背景属性总览CSS 为背景提供了 7 个细分属性还有一个把它们打包的简写属性属性作用background-color背景颜色background-image背景图片background-repeat图片平铺方式background-size图片尺寸background-position图片位置background-attachment图片是否随滚动background-clip/ background-origin绘制/定位区域延伸background以上属性的简写下面逐个拆解。1️⃣ background-color背景颜色设置元素的背景色默认值为transparent透明。.box{width:300px;height:300px;background-color:#ccc;} 即使设置了背景图片也强烈建议同时声明background-color。当图片加载失败断网、路径错误时颜色仍能保证可读性半透明 PNG 下颜色也会透出来。⚠️ 无障碍提示文本与背景的对比度至少4.5:1大号文本 3:1否则低视力用户难以阅读。2️⃣ background-image背景图片.box{width:600px;height:600px;background-image:url(images/img1.jpg);}默认行为要记牢图片从元素左上角开始显示图片小于元素​ → 默认水平垂直平铺铺满元素图片大于元素​ → 从左上角覆盖超出部分不可见可设多张背景用逗号分隔先写的在上层.box{background-image:url(star.png),url(cat.jpg);} 背景图对屏幕阅读器不可见若图片承载关键信息必须在 HTML 中语义化描述。3️⃣ background-repeat平铺方式控制图片够不够大时怎么重复.box{width:800px;height:600px;background-image:url(./images/3.webp);background-repeat:no-repeat;}常用值值含义repeat水平 垂直都平铺默认repeat-x仅水平repeat-y仅垂直no-repeat不平铺space均匀平铺不裁剪首尾贴边round随容器伸缩保证完整显示整数张space和round在现代浏览器已广泛支持适合纹理背景。4️⃣ background-size图片大小background-size:800px;/* 宽 800高等比缩放 */background-size:400px 600px;/* 宽 高 明确值 */background-size:50%;/* 相对元素尺寸的百分比 */background-size:cover;/* 等比例放大完全覆盖元素可能裁剪 */background-size:contain;/* 等比例放大完整显示可能留白 */核心区别一句话cover​ → 填满容器图片可能溢出去被裁掉contain​ → 图片完整显示容器可能空一块露底色 百分比的计算基准是背景定位区域默认含padding受background-origin影响。5️⃣ background-position图片位置控制背景图在容器里的起点background-position:50px 50px;/* 右移 50下移 50 */background-position:-50px -50px;/* 左移 50上移 50 */background-position:50% 50%;/* 居中 */background-position:right bottom;/* 右下角 */background-position:50px;/* 水平 50px垂直居中 */规则速记第一个值 水平x第二个 垂直y正值 → 右下负值 → 左上单值 → 水平垂直默认center关键词top/ bottom/ left/ right/ center可组合百分比的机制比较绕图像自身的N% 点​ 对齐容器的N% 点。所以50% 50%才是真正居中。6️⃣ background-attachment滚动行为决定背景图是跟着内容走还是钉在视口上body{background-image:url(smiley.gif);background-repeat:no-repeat;background-attachment:fixed;}值行为scroll默认值背景随元素内容滚动fixed相对于视口固定产生钉住效果常用于全屏背景local相对于元素内容固定内容滚动时背景跟着滚用在可滚动容器内fixed是实现视差滚动和始终可见的背景图的关键。7️⃣ background简写属性把所有背景属性写在一起省代码.box{background:#cccurl(./images/3.webp)no-repeat center/cover fixed;}通用写法background: color image repeat attachment position/size;注意事项顺序不严格但position/size必须用/连写且position在前、size在后——这是唯一必须固定顺序的一对background-color只能出现在最后一层多背景时因为整个元素只有一种底色没写的属性取默认值所以简写会覆盖前面的单属性——推荐先写简写再写需要覆盖的单属性多背景用逗号分隔每层每层的子属性也可分别指定background:url(star.png)no-repeat left top / 50px,url(bg.jpg)no-repeat center / cover; 一个综合示例.hero{width:100%;height:500px;background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url(hero.jpg)no-repeat center / cover fixed;background-color:#333;/* 兜底色 */}叠加了渐变遮罩 大图 视差 兜底色是落地页横幅的经典写法。易踩的坑总结❌ 以为background-size: 50%是图片原始尺寸的 50% → 实际是元素尺寸的 50%❌ 简写里把position和size写反 → 必须用pos/size❌ 多背景忘了background-color只能放最后一层❌cover想完整显示图片 → 应该用contain❌ 可滚动div里想背景跟着内容走 → 用local而非scroll属性速查表.box{background-color:#fff;background-image:url(img.png);background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;/* 等价于 ↓ */background:#fffurl(img.png)no-repeat fixed center/cover;}掌握这 7 个属性95% 的背景需求都能搞定。剩下的 background-clip和 background-origin用于控制背景画到哪和定位基准在高级布局里再用不迟。读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。 感谢各位读者的支持与关注期待与大家一起在前端开发的道路上共同进步