瑜妩写CSS写了这些年，回头再看，背景样式这一个知识点就足够撑起半本手册。很多时候我们觉得布局难、动画炫，其实真正决定页面质感的第一层，恰恰就是背景怎么处理。背景色、背景图、雪碧图、渐变，这四个词几乎覆盖了日常开发中80%的背景需求。这篇文章我会把自己在这些技术点上踩过的坑、总结出的规律，以及那些文档里不会写明的细节，一次性讲清楚。
有个朋友之前问我：“CSS里背景看起来不就一个background嘛，为什么每次写页面还是会手忙脚乱？”这个问题问得特别好。背景属性其实是一个复合属性的集合，你只有真正把 background-image、background-position、background-repeat、background-size 这几个核心成员吃透了，后面再看雪碧图和渐变，就会觉得一通百通。这篇文章适合刚接触CSS的新手，也适合那些写了几年CSS但从不深究背景细节的“熟练工”，看完你大概率会发现自己以前有很多操作其实是可以简化掉的。
1. 背景样式基础：从单属性到复合写法
1.1 背景颜色与背景图的“底层逻辑”
先聊 background-color。这个属性看起来最简单，但它在整个背景体系里承担的是“兜底”的角色。什么意思？当背景图因为网络问题没加载出来，或者背景图上有透明区域的时候，你看到的颜色就是 background-color 的值。所以一个合格的开发习惯是：只要用了背景图，就顺手把背景颜色也写上。这样用户弱网环境下打开页面，至少不会看到一块刺眼的白屏，而是有一个和设计稿接近的底色。
背景图的属性是 background-image，常用的取值有两种：一种是 url() 引入图片资源，一种是渐变函数生成的无损图形。这里有个初学者容易忽略的点：background-image 并不会默认平铺，也不会默认居中，它默认会放在元素的左上角。如果一张200x200的图丢在一个800x600的容器里，你不多写几行代码，就会看到图片从左上角开始“铺瓷砖”，一直铺满整个容器。这就牵出下一个属性 background-repeat。
1.2 平铺、定位与尺寸控制的协作关系
background-repeat 的默认值是 repeat，也就是水平和垂直方向都平铺。我们最常用的几个值：
- no-repeat：不平铺，图片就在设置的位置出现一次
- repeat-x：只在水平方向平铺，通常用来做横向渐变条纹或重复纹理
- repeat-y：只在垂直方向平铺，常见于侧边栏的竖线纹理
再说 background-position。这个属性在配合雪碧图时是核心中的核心。它支持两种主要取值：一种是关键词，比如 center、top、left、right、bottom；另一种是具体的长度值或百分比，比如 0 0、-120px -45px 这类。往负值方向移动，等于把图片往左、往上推，这正是雪碧图技术切图的数学基础。
background-size 则是控制背景图尺寸的。它有几个比较有代表性的取值：
- cover：让图片等比例缩放，尽可能填满整个容器，超出的部分会裁掉
- contain：让图片等比例缩放，保证图片完整可见，未被填满的区域露出背景色
- 百分比和固定像素：最直观，但需要自己计算比例，用的场景不多
cover 和 contain 这组对比建议多体验几遍，它们的细微差别会在页面适配中救你一命。我在移动端做首屏背景时，几乎清一色用 cover，因为不管什么屏幕尺寸，图都能铺满且不变形；但你要在图上叠加文字信息，就得想办法把关键内容放在图片中心附近，因为 cover 会把边缘裁掉。
1.3 background-attachment 与滚动体验
background-attachment 是一个被低估的属性。它的三个值分别是 scroll、fixed、local。默认是 scroll，意思是背景随元素滚动而滚动；fixed 让背景相对视口固定，滚动时背景不动，classic 的视差效果就是靠它做的；local 则是背景跟随元素内容一起滚动，适合做内部有滚动条的区域。实际用下来，fixed 在移动端兼容性问题较多，经常会有抖动，现代前端里做视差一般优先考虑 JavaScript 滚动库，或者把 fixed 放在特定版本检测里再用。
另一个和滚动强相关的细节是：background-attachment: fixed 在某些浏览器中会让 background-size: cover 失效，需要特别注意。我之前做一个公司官网时，首屏背景图用 fixed，在 Chrome 上正常，切到部分安卓 WebView 直接整个背景透掉，排查了半小时才发现是两者冲突导致的。
1.4 复合写法的顺序规律
background 复合写法的标准顺序是：
css复制background: color image repeat position / size attachment;
如果你写的是：
css复制background: url(logo.png) no-repeat center / 100px 80px;
那其实省略了 color 和 attachment，语法是允许的。但有个地方非常容易踩坑：position 和 size 之间必须用 / 分隔，特别是当你只想设置 size 的时候，前面的 position 也必须写出来。比如你只想把背景图缩到一半，不能直接写 background-size: 50% 在复合属性里，必须写成：
css复制background: url(bg.png) center / 50% no-repeat;
位置信息不能省。这个规矩是语法层面的硬性要求，写多了之后自然就记住了，刚接触时总会漏掉斜杠导致整行声明失效。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 雪碧图技术：原理、切图与应用场景
2.1 为什么要费劲去拼图
雪碧图的核心价值是减少HTTP请求。页面里每引用一张图片，浏览器就要发一次请求去拿这张图。请求越多，页面加载越慢，尤其是在HTTP/1.1时代，浏览器对同一域名的并发连接数还有限制。当你的页面里有一排小图标、好几个需要频繁切换背景位置的表情时，如果每个图标都是一张独立图片，那光图标这块就能给服务器来一轮“轰炸”。雪碧图的思路就是：把所有小图标塞进一张大图里，页面只加载这一张大图，然后通过 background-position 去精确显示需要的那个区域。这样请求数量从N个变成1个，性能提升非常明显。
现在有iconfont、SVG Sprite、Base64等多种替代方案，但它们各自有各自的限制。iconfont 只能做单色图标，渐变和复杂多色图标做不了；SVG Sprite 在低版本浏览器兼容性有要求；Base64 会让CSS文件膨胀、维护困难。所以雪碧图至今仍然是一个值得掌握的方案，尤其在游戏页面、运营活动页和图像资源较多且效果复杂的场景里，它依然是性价比很高的选择。
2.2 手把手做一张雪碧图
做雪碧图之前，先要规划好你的图标尺寸。理想状态下，所有小图的尺寸应该是一致的，这样后面计算坐标会省心很多。我见过很多人直接把设计稿里的图标拖进一张画布，结果尺寸参差不齐，切的时候几乎要疯狂。
标准操作流程是这样的：
- 在PS或者Figma里新建一张透明画布，宽度和高度根据图标数量和排列方式决定，比如一组图标横排，宽度就是“图标宽度 x 数量 + 间距 x (数量-1)”。
- 把所有小图标拖进去，按顺序排列，注意每个图标之间留出至少4-10像素的间距，防止截图时误伤到旁边的图。
- 导出为PNG或者WebP。除非你的图标真的有半透明柔和阴影，否则不要导出成JPG。
- 记录每个图标在画布里的精确坐标位置，这是切图的关键信息。
简单来说，假设有一张雪碧图总宽400px，每个图标宽64px，间距8px，那你需要的背景位置大概是：
- 第一个图标：background-position: 0 0
- 第二个图标：background-position: -72px 0
- 第三个图标：background-position: -144px 0
这里的72px=图标宽度64px+间距8px。如果你是自己用工具切的，工具会直接把坐标给你，不用手算。如果你P图时没有保留间距，那位置就按图标宽度连续累加，但此时兼容性上有个隐患：一旦边距不够，容易把相邻图标露出来。所以我总是建议大家留间距。
2.3 使用雪碧图的三种具体写法
在CSS里使用雪碧图，最常见的写法就是给每个图标设置一个独立的类：
css复制.icon {
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.icon-home {
width: 32px;
height: 32px;
background-position: 0 0;
}
.icon-user {
width: 32px;
height: 32px;
background-position: -40px 0;
}
.icon-setting {
width: 32px;
height: 32px;
background-position: -80px 0;
}
对应的HTML结构就是：
html复制<span class="icon icon-home"></span>
<span class="icon icon-user"></span>
这时候有个关键点：每个图标元素的 width 和 height 必须和雪碧图里对应区域的尺寸保持一致，不然会显示到别的区域去。还有一点，这类元素默认是 inline 的，直接设置宽高在部分浏览器里会失效，所以要么加 display: inline-block，要么直接用块级标签并设成 block。
第二种写法是伪元素方式，适合那种标签里有文字、但文字旁边需要挂一个小图标的场景：
css复制.nav-item::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(../images/sprite.png) -100px -20px no-repeat;
}
伪元素的优势是 HTML 结构干净，不需要额外嵌套 span，并且可以避免“为了显示图标而堆无语义标签”的问题。
第三种写法是响应式雪碧图。如果设计稿里有2倍图，你的雪碧图宽度是设计稿的两倍，那么 background-size 就要设置为整个雪碧图原始设计尺寸的一半。举个例子，雪碧图实际宽度是 200px，高度是 100px，设计稿里图标要显示 50x50，你就可以写：
css复制.icon {
width: 50px;
height: 50px;
background-image: url(sprite@2x.png);
background-size: 200px 100px; /* 即整个雪碧图缩小一半 */
background-repeat: no-repeat;
}
这样一来，背景图会被整体缩放，图标也相应地从100x100缩放成50x50，彻底告别2倍图上“图标又大又糊”的困境。这种方式在Android开发和移动端H5页面里非常实用。
2.4 雪碧图维护的“三要三不要”
维护雪碧图最大的痛点就是后期改动。如果新加一个图标就重新出图、重新计算所有坐标、重新更新CSS，那效率和幸福感都会直线下降。我个人的经验是：
- 要保留原始PSD或设计源文件，千万别把源文件丢了，不然下次改图得重画
- 要在CSS文件里给每个图标的坐标写注释，注明对应的是哪个icon，后期维护的人不用一遍遍对图
- 要尽量按功能模块把图标分组，比如全部首页相关的放在一张雪碧图里，全部个人中心相关的放在另一张里，避免一张5000px宽的大图全部堆在一起
- 不要频繁往旧雪碧图里硬塞新图标，如果新图和原图风格、尺寸差异太大，单独做一张新雪碧图往往更合适
- 不要在雪碧图里混入多种尺寸混乱的图片，切图会变得非常痛苦
- 不要用JPG格式保存雪碧图，除非你100%确定所有图标都没有透明需求
3. CSS渐变：从线性到锥形，一次讲透
3.1 linear-gradient的方向与节点逻辑
线性渐变是日常开发中使用频率最高的渐变类型。它的语法核心是“方向 + 颜色节点”。方向可以是角度值，比如 0deg 从下往上、90deg 从左往右、180deg 从上往下；也可以是关键词组合，比如 to right、to bottom right 之类的。颜色节点则是一个或多个“颜色 + 位置”的组合。
一个最基础的例子：
css复制background: linear-gradient(90deg, #ff7e5f, #feb47b);
这表示从左往右，由珊瑚色渐变到橙色。默认没有写位置时，两个颜色平均分配，各占50%。你可以手动指定位置：
css复制background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 50%, #ffffff 100%);
这表示第一个颜色在起点，第二个颜色在50%的位置，第三个颜色在终点。超过50%之后，原本的第二个颜色到第三个颜色之间还会继续渐变。如果你想实现一个“颜色突然切换”的硬分割效果，可以把两个颜色写在同一个位置：
css复制background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 50%, #ffffff 50%, #ffffff 100%);
这就变成了左边一半是渐变，右边一半是纯白色。这种手法在进度条、标签页、按钮纹理里应用非常广泛。
3.2 线性渐变的几个实战套路
第一个套路是“渐变分隔线”。很多设计稿里有一条“从有颜色到透明再变到有颜色”的分隔线，看起来非常柔和。直接用linear-gradient就能实现：
css复制.divider {
height: 2px;
background: linear-gradient(90deg, transparent, #ccc, transparent);
}
第二个套路是“斜向纹理”。给卡片加一层淡淡的角度纹理，会让页面显得更有质感：
css复制.card-texture {
background: linear-gradient(45deg, #f5f5f5 25%, #fff 25%, #fff 50%, #f5f5f5 50%, #f5f5f5 75%, #fff 75%, #fff 100%);
background-size: 20px 20px;
}
这个原理其实是在一个Repeat的background-size下，用多个方向相同的渐变片段拼出重复纹理。写一次就会了，但刚开始时总觉得像变魔法。
第三个套路是“渐变遮罩”。把线性渐变叠加在背景图上，可以制造出老照片那种边缘暗化或者文字区域压暗的效果：
css复制.banner {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url(banner.jpg);
}
注意这里多个背景叠加的写法，图片放在渐变的右边，渐变放在最前面，浏览器会按照“先写的在上层”来渲染。这种叠加式的背景写法，我在做运营Banner时几乎必用，既能保证文字可读性，又不用额外处理一张压暗后的图片。
3.3 radial-gradient圆形渐变的三个参数
radial-gradient 是径向渐变，从圆形中心向外扩散。它的核心参数有三个：形状、位置、颜色节点。默认是 ellipse（椭圆），但你也可以指定为 circle（正圆形）。
css复制background: radial-gradient(circle at center, #fff5f5, #ff7e5f);
这里的 at center 表示中心点在正中间，你也可以改成 at top left、at 30% 40% 这样的任意位置。颜色节点写法和线性渐变一样，也可以叠加多种颜色，形成类似“光晕扩散”的效果。
有一个特别实用的场景：模拟“聚光灯”效果，用在视觉引导或者高亮提示上：
css复制.spotlight {
background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%);
}
另外，径向渐变也能做“纹理点阵”。给背景加一层密密麻麻的小圆点：
css复制.dotted-bg {
background: radial-gradient(circle, #333 1px, transparent 1px);
background-size: 12px 12px;
}
注意这里 background-size 控制的是每个重复单元的尺寸。如果想调整点阵密度，改 background-size 就好，而点的大小则通过圆形渐变的半径值去控制。这个写法在稿纸风格背景里出现过很多次。
3.4 conic-gradient锥形渐变与饼图蓝本
锥形渐变是三种渐变里相对少见但效果极其出彩的一种。它的特点是围绕中心点旋转一周，颜色沿角度分布。最典型的使用场景是饼图、环形进度条、色轮。
一个最简单的饼图：
css复制.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#ff7e5f 0% 30%, #feb47b 30% 60%, #7bdcb5 60% 100%);
}
这里每个颜色后面有两个百分比，第一个是开始位置，第二个是结束位置。和线性渐变不同，如果你写 conic-gradient(#ff7e5f 0%, #feb47b 30%)，那从0%到30%之间其实是渐变的，不是硬分割。饼图需要的是硬分割，所以务必给每个颜色都写两个位置。
环形进度条的想法也和饼图类似，只是你需要在中空部分盖一层圆形的背景色，让它看起来像一个环。具体做法是外层元素加上 conic-gradient 背景，然后在内部放一个同直径、同边框半径的白色圆，或者用 ::after 做一个内圆覆盖在中间。视觉效果非常像一个进度组件。
3.5 渐变兼容性与性能的坑
渐变现在的主流浏览器兼容性已经很好了，但在部分旧内核浏览器上依然要加 -webkit- 前缀。如果你不打算兼容那些老浏览器，前缀是可以不写的。但是如果公司还有一批老设备用户，比较稳妥的做法是用自动化构建工具比如 PostCSS 的 autoprefixer 自动补前缀，不要在源文件里手写一堆兼容代码，那样阅读体验会非常差。
还有一个性能上的坑：渐变是浏览器动态计算生成的，虽然单次渲染开销不大，但如果一个页面里出现大量大尺寸渐变背景，同时还有频繁动画，某些低端机型会明显卡顿。我做过一个带有大面积渐变背景的沉浸式落地页，在项目开发时用Chrome一切正常，真机测试时安卓端有点掉帧，最后把部分固定渐变替换成图片并开启 GPU 加速，情况才好转。
4. 常见问题与排查技巧实录
4.1 背景图不显示的根本原因
背景图“死活不显示”是新手问得最多的问题，通常可以按这几个方向排查：
- 路径错误。CSS里的 url() 是相对CSS文件的，不是相对HTML页面的。很多人在这上面栽跟头。项目里如果目录层级深，特别容易配错路径。我的习惯是，凡是项目使用构建工具，图片路径一律用绝对路径（以 / 开头）或由构建工具生成的哈希路径，尽量避免手动拼相对路径。
- background-repeat 问题。如果图是有的，但看不到，可能是因为图片本身比较大，你只看到了局部空白区域。把 background-repeat 改成 no-repeat 或者稍微调一下 position 和 size 试试。
- 元素没有尺寸。这是最常见的情况之一。一个空 div 没有高度和宽度，背景图再大也不会显示出来。给元素设一个宽高，或者有内容撑开，背景才会看得见。
- 背景被其他元素盖住。检查一下该区域的 z-index 和父级是否创建了层叠上下文，有时候不是背景没有，而是被盖住了。
4.2 渐变不生效的场景
渐变不生效最常见的原因是：浏览器不认识这个函数或者某个参数语法不对。比如旧浏览器不支持 conic-gradient，或者你把渐变写在了 background-color 里。记住，渐变在CSS里本质是 image，要写在 background-image 或 background 里，不能写在 background-color 里。
css复制/* 错误的 */
background-color: linear-gradient(red, blue);
/* 正确的 */
background-image: linear-gradient(red, blue);
另外，渐变里的颜色值必须用英文逗号分隔。你写 linear-gradient(red, blue) 没问题，但写 linear-gradient(red; blue) 直接整行被丢弃。
4.3 雪碧图定位偏移的排查思路
雪碧图最常见的 bug 是图标显示位置不对，明明该显示第一个图标，却显示成第二个或者显示成半个图标。排查思路是这样的：
第一步，确认元素的宽高和雪碧图里目标图标的宽高是否完全一致。不一致就会出现“读到旁边区域”的情况。
第二步，确认 background-position 的数值方向。背景图是向左上移动才能显示出靠右、靠下的内容，所以 position 通常是负值。写成正值就会往反方向跑。
第三步，确认是否有其他元素的样式干扰。有些浏览器默认会给 span 加 user agent 样式，导致盒模型尺寸不对。建议用开发者工具审查元素，直接看 Computed 面板里的 background-position 是否是你设置的值。
第四步，检查背景图的 URL 是否真的加载对了资源。在 Network 面板里看最终请求的图片是否就是你预期的那张雪碧图。经常有这种情况：CSS里写了多个背景规则，后面的覆盖了前面的，导致最终使用的图根本不是你以为的那张。
4.4 快速定位问题的小技巧
我在调试CSS背景问题时，习惯性地在浏览器开发者工具的 Elements 面板里选中那个元素，然后直接改 background-position、background-size 的数值，一边改一边看效果。这种方式比我反复刷新页面、修改代码再验证要高效得多。改到满意的效果后，再回到代码里同步数值。还有一个技巧：临时给元素设置一个亮眼的 background-color: rgba(255,0,0,0.2); 来判断元素本身的盒区域到底有多大，这能帮你确认到底是不是尺寸问题导致的背景显示异常。
5. 从背景样式到现代CSS的进阶路线
背景里这几个知识点其实只是CSS技能树的冰山一角。如果你把 background、雪碧图、渐变这三块吃透了，再去理解滤镜、混合模式、clip-path、mask 这些更高级的属性，会发现它们之间有很多相通之处。比如渐变不只是用来做“背景”，它还能配合 mask 做图片遮罩过渡；雪碧图的定位思想也被大量用在游戏开发中；而 conic-gradient 和 CSS 变量结合，能做动态数据可视化的仪表盘雏形。
我有一个个人比较推荐的学习习惯：把常用的背景写法做成自己的“代码片段库”，在VS Code里配置成快捷指令，比如输入 bg-cover 自动补全成 background: url() center/cover no-repeat;，输入 bg-gradient 自动补全成线性渐变的模板。积累这些片段能让你在实际项目里不知不觉节省大量重复排版时间。
现代CSS里还有一个比给元素设置纯背景更进阶的方向——容器查询和样式查询。以前响应式布局主要依赖视口的宽度，现在你可以根据容器的实际宽度来决定背景图是平铺还是拉伸、渐变是横向还是纵向。这个能力在做复杂组件和微前端场景时特别有用。但进阶归进阶，基础背景属性依然是所有炫技操作的根基，地基打不牢，上层建筑再花哨也容易塌。
最后分享一个我自己常用的组合：切图用PS的切片工具自动生成雪碧图，坐标信息用文本记录，CSS用组合选择器配合CSS变量统一管理，一整套流程下来，既不费脑也不会出错。CSS变量在背景场景里也很好用，比如把所有主色、渐变色、纹理都抽成变量，换肤或者换主题只需要改几行变量值，背景整个跟着变。
如果你想找更多练手素材，推荐去把市面上主流电商网站的CSS拉出来看看，重点观察它们 header、导航、icon 区域的 background 写法是怎么组织的。你很快就会发现，真正生产环境里的CSS比教程里复杂得多，但底层逻辑永远都是那一套：颜色、图片、位置、尺寸、渐变。把这五个词在脑子里建立好索引，任何背景需求基本都能见招拆招。