CSS背景样式、雪碧图与渐变实战：从基础到进阶性能优化

1. 背景样式，先把它彻底玩明白

CSS背景样式，说简单也简单，说复杂也复杂。日常开发里你可能天天都在写background-color或者background-image，但真到了要用雪碧图、渐变、多背景叠加的时候，不少同学还是容易卡壳。这一篇我不打算把文档翻译一遍，而是挑那些真正影响出图效果、真正让新手挠头的点来讲透。

先说个基本的判断：背景样式是整个CSS里性价比很高的一块，学会了它能省掉无数张切图和无数个多余的DOM节点。你看很多复杂的视觉效果，按钮纹理、卡片毛玻璃、渐变边框、带光影的色块，用背景属性几行就能搞定，完全没有必要去堆图片或者嵌套多层div。

1.1 日常高频背景属性怎么搭配才不翻车

先把常用属性列出来，别嫌基础，我见过不少写了两年CSS的人还搞混background-size和background-position传参顺序的。

• background-color：纯色打底，永远最先设置。一个常见场景：图片还没加载出来，或者加载失败的时候，背景色至少能兜住页面，不至于一片惨白。
• background-image：放图片或者渐变，支持多个值，用逗号分隔。
• background-repeat：默认是repeat，但是绝大多数情况下你会改成no-repeat、repeat-x、repeat-y或者round/space。
• background-position：定位背景图片位置，两个值分别是水平方向和垂直方向，可以是像素、百分比、关键字（center、top、left等）。
• background-size：很多人一开始会搞混cover和contain。记住一句话：cover是让图片完全覆盖容器，超出部分裁剪掉；contain是让图片完整放进容器，可能留白。做轮播图封面、卡片头图，几乎只会用到这两个值。
• background-attachment：控制背景是否跟随滚动。fixed能做出视差滚动效果，但移动端有兼容性问题，后面细说。
• background-origin和background-clip：进阶选手用得多，一个决定背景定位的参考区域，一个决定背景绘画的范围。做渐变边框、文字渐变必须用到background-clip，下面专门讲。
• background-blend-mode：让背景图片之间、背景图和背景色之间做混合。这个属性视觉效果很强，处理商品图、氛围背景很好用。

还有个容易被忽略的点，background-position如果传百分比，它的计算方式不是你想当然的“图片左边缘和容器左边缘对齐百分之多少”，而是图片上的某个点和容器上的某个点对齐。比如background-position: 50% 50%，意思是图片50%位置的点对准容器50%位置的点，这才是居中的本质逻辑。这个理解了，后面搞雪碧图定位才能透。

1.2 多背景叠加与background-attachment

多背景是CSS3开始支持的特性，写法是在一个background里用逗号分隔多层背景，排在前面的覆盖在后面。听起来简单，但实际使用中有两个坑。

第一个坑是背景图尺寸和位置必须配套。你写多背景的时候，如果只给一个background-size或者background-position，那这个值会应用到所有背景层上，很容易出现其中一张图错位的状况。解决办法是给每层单独写，中间用逗号分隔，放在同一属性里对应位置，但一般人很容易记混。所以我的习惯是拆开写：background-image: url(a.png), url(b.png);，然后单独一行background-size: 100px 100px, cover;，再单独一行background-position: 20px 30px, center;。这样一层对应一组参数，肉眼扫过去就知道谁是谁。

第二个坑是background-attachment: fixed。桌面端做好好的，一拿到手机上看，背景直接原地起飞，因为移动端浏览器对fixed的支持并不一致。常见替代方案是用position: fixed的伪元素来做背景层，把z-index设成负数，这样既保留固定背景效果，又能在相对老旧的移动端WebView里稳定运行。

多背景的实用场景太多了。比如卡片要实现一张底图加一层半透明渐变压暗文字区域的效果，你完全不用在HTML里加一层遮罩，直接写两层背景就行。第一层写线性渐变（从透明到黑色），第二层写图片，出来的效果就是图片底部带一道渐变蒙版，文字放上面清清楚楚。

1.3 移动端坑：背景图片加载与闪白

移动端背景图片经常有两个问题：一是白屏等待，二是闪一下才出图。

白屏等待的原因很直白，CSS背景图不像img标签那样能触发浏览器的预加载机制，尤其是写在样式表里的背景图，浏览器解析到那一步才会去请求。所以碰到首屏关键图用背景实现的，建议在HTML里放一个隐藏的img标签提前加载，或者直接把关键图改成img标签。

闪白问题，常见于有背景图的页面切换或滚动时。解决办法是给背景图加上-webkit-transform: translateZ(0)或者will-change: transform之类的3D加速属性，强制让背景层独立成层。但这个技巧不能滥用，动不动就上will-change会吃掉不少内存，尤其是列表页长页面，后果可能比闪白还严重。

2. 雪碧图：一张图解决所有小图标请求

雪碧图（CSS Sprite）可能对现在很多小伙伴来说有点陌生了，因为现在有字体图标、SVG Sprite、iconfont，甚至越来越多的团队直接上图片懒加载，雪碧图似乎不那么流行。但说实话，凡是做过几年前端的人，基本都跟雪碧图打过交道。它解决的核心问题只有一个：减少HTTP请求。

想想看，一个页面如果有20个小图标，每个都是单独一张图，那至少产生20个请求，而且每张图都有各自的请求头和响应头。如果用雪碧图，把所有零散图标拼到一张大图上，通过background-position来截取需要的部分，20个图标只需要1个请求。这在HTTP/1.1时代简直就是性能优化的大杀器，哪怕现在HTTP/2支持多路复用了，雪碧图在某些场景下仍然有它的意义——减少请求数量、减少重复的请求头开销，加上部分旧系统、小程序、老项目里依然在用。

2.1 雪碧图定位的核心逻辑

雪碧图的使用，本质上就是回答一个问题：我怎么把大图里那个图标准确“抠”出来。

要回答这个问题，你得先理解background-position和background-size的关系。假设你的雪碧图是一张500x300的大图，里面有一个20x20的图标，它在大图中的坐标是(60, 80)（即这个图标左上角距离大图左边缘60px，距离上边缘80px）。你现在要让一个20x20的div只显示这个图标，这个时候：

1. 背景图尺寸设为原始尺寸，即width: 500px; height: 300px。这个尺寸不是写在background-size里的，而是指这个div的尺寸。很多人一开始就搞反了，以为要改的是div大小，其实雪碧图定位更常见的做法是：固定div为图标大小，背景图不缩放，直接通过background-position做偏移。

2. background-position: -60px -80px;。因为默认背景图从左上角开始排列，所以要把大图往左、往上挪，把目标图标挪到div的可见区域。

3. 注意这里的背景图没有设置background-size，默认是auto，即图片原始尺寸。如果设置了background-size，坐标偏移就要重新换算，这就是很多新手容易踩坑的地方。

还有另一种常见方案是div尺寸保持20x20，background-size: 500px 300px（即原尺寸），效果和上面一样。但是如果你为了兼容高清屏，准备了两倍图，那background-size就必须缩小一半，定位坐标也得跟着缩放。这个事儿不搞清楚，做出来的图标要么错位，要么只显示一半，排查起来很要命。

2.2 手把手做一张雪碧图

做雪碧图的流程不复杂，但每一步都有细节。

第一步，整理图标。把要用到的所有小图标收集齐，统一尺寸、统一风格，最好是同一套设计源文件，避免不同设计师出的图尺寸、留白都不一样。整理的时候顺便排个序，要么按功能，要么按尺寸。

第二步，拼图。你可以用Photoshop手动排，也可以用在线工具或者Sketch插件自动生成。手动排的时候注意两点：一是图标与图标之间要留出足够的间距，推荐至少10px，防止背景定位因为四舍五入或者缩放出现错位；二是尽量把所有图标放在同一行或者同一列，这样计算坐标简单，不容易搞乱。如果是网格排列，横竖都留固定间距，坐标就能用公式算出来。

第三步，记录坐标。这一步最不能省，也不建议纯手工记录，因为图标多了总会抄错。正规做法是用构建工具自动生成CSS，比如webpack的sprite-webpack-plugin，或者gulp的spritesmith。工具跑完会直接输出一张合成图加一个.scss或.css文件，里面每个图标对应一个类名，里面写好了width、height、background-position。你自己手写的话，务必用Excel或者文档把每个图标的文件名、坐标、尺寸记下来。

说一下坐标计算的公式。如果大图是W x H的，单个图标是w x h的，图标所在网格是第i列第j行，间距是gap，那它左上角的坐标就是：

code复制x = (i - 1) * (w + gap)
y = (j - 1) * (h + gap)

background-position就写-x -y。看起来很基础，但它能帮你快速验证工具生成的CSS有没有问题，也方便你手动调整非规则排列的图标。

2.3 雪碧图的使用边界与替代方案

雪碧图不是银弹，有些场景用了反而添乱。

如果你的图标需要频繁换颜色（比如主题色切换、暗黑模式适配），雪碧图基本没法做，除非每个颜色各出一套。这时候优先考虑SVG，尤其是内联SVG或者SVG Symbol，既能变色又能缩放，而且现在浏览器支持度很好，这东西才是这个细分场景的正解。

如果你的图标有动效需求，比如hover时变个形态、转个角度，用雪碧图只能做背景切换。雪碧图切换确实可以做个简单的两步帧动画，但要做得细腻还是得靠CSS动画配合SVG，或者直接用src切换多张图片。

如果你的图标有高清屏适配需求，雪碧图也不是不行，但你需要准备两套图：一套1倍尺寸，一套2倍尺寸。用background-size把大图缩放到逻辑尺寸的一半，再配合@media (-webkit-min-device-pixel-ratio: 2)来切图。麻烦是麻烦，但稳定。

还有一个小技巧，雪碧图中的空白区域尽量用透明PNG，这个不用多说，但很多初学者会拿JPG拼图，拼出来整个背景盖住其他元素，这是低级错误。另外，记得给装雪碧图的元素加background-repeat: no-repeat，不然背景图会自动平铺，轻则显示多个图标，重则你定位了半天发现完全不对。

3. 渐变：从线性到径向再到锥形

渐变大概是CSS里最容易被低估的特性。入门的时候学一下linear-gradient，以为会写个to right就是会渐变了，真正深入之后才发现，渐变能做出的效果远远超出一个滑块能代表的范畴。按钮质感、进度条、边框特效、光照氛围、噪点纹理，甚至格子和棋盘格，都能用渐变完成。而且渐变是矢量生成，天然适配高清屏，不存在图片模糊的问题。

3.1 线性渐变的核心三要素

linear-gradient的完整语法看着长，其实拆开就三个要素：方向、色标、渐变类型。

方向可以用角度或关键字指定。to right就是从左到右，45deg是从左下到右上方向，0deg是从下到上。注意，角度的0度方向是朝上的，顺时针为正，这是CSS渐变一个很容易搞反的细节。很多人写了linear-gradient(90deg, red, blue)以为是从左到右，实际上90deg对应的是从左到右，这个没问题，因为顺时针90度方向正好是右边。但如果你看到linear-gradient(180deg, red, blue)，方向就是从上到下，因为180度朝下。建议记忆方式是：0度朝上、90度朝右、180度朝下、270度朝左，这样的话方向和角度就对上了。

色标是渐变的灵魂。格式是“颜色+位置”，位置可以写百分比、像素、任意长度单位。多个色标之间可以完全不均匀分布，比如linear-gradient(135deg, #f00 0%, #ff0 30%, #0f0 100%)，就是红色渐变到黄色，黄色在30%位置提前接近终点。灵活控制色标位置就能做出很多有趣的节奏感，比如仿金属光泽的斜向高光。

还有个比较硬核的语法，color stop中间是可以加提示（hint）的，控制两个颜色之间的渐变中点落在哪里。比如linear-gradient(red, 20%, blue)，20%位置是渐变中点，意味着红色会停留比较久，蓝色在临近结束的地方迅速接管。默认渐变中点是50%，如果你不写hint，两个颜色的过渡是均匀的。

实用技巧：制作条纹背景。你不需要几个色标，只需要两个色标位置相同，就能切出一个硬边。比如linear-gradient(90deg, #333 50%, #eee 50%)，红半格白半格，配合background-size: 20px 20px就会平铺出格子纹样。想要更细的虚线感，就调整百分比和尺寸，很快就能拼出背景里常用的纹理。

3.2 径向渐变与重复渐变

radial-gradient和linear-gradient的逻辑类似，但方向变成了从中心向外扩散。关键参数是形状（circle还是ellipse）、圆心位置（at top left、at 30% 40%）、以及半径或范围（closest-side、farthest-corner等关键字）。

做光晕效果的时候，径向渐变特别有用。比如一个按钮想做出中心亮、边缘暗的发光效果，写background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%)，就是从圆心向四周逐渐透明的光晕，直接铺在按钮上就完事。

重复渐变有repeating-linear-gradient和repeating-radial-gradient，这个看着简单，用起来特别容易懵。核心区别是：重复渐变的色标模式会被反复平铺，直到填满整个背景。所以你要定义一个“基本单元”，比如条纹背景写repeating-linear-gradient(90deg, #eee 0, #eee 10px, #ccc 10px, #ccc 20px)，意思就是10px白、10px灰交替排列。注意这里最后一个色标位置的数值决定了重复单元的宽度。

重复渐变有个隐藏用法，做斜条纹警戒线，比如工程类网站常见的黄黑斜纹：

css复制background: repeating-linear-gradient(
  45deg,
  #ffc800 0,
  #ffc800 20px,
  #111 20px,
  #111 40px
);

这个效果如果用图片做，还得专门切斜条；用渐变两行就搞定，还不会变形。

3.3 用渐变做真实案例：渐变边框、渐变进度条、文字渐变

抽象语法说一堆，不如直接来三个能抄作业的案例。

第一，渐变边框。实现思路是利用background-origin和background-clip，外层背景显示渐变，内层背景用纯色盖住中间区域，露出边缘一圈就是边框效果。

css复制.gradient-border {
  border: 4px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #f5af19, #f12711) border-box;
}

这段代码的关键是padding-box和border-box两个关键字：第一层背景画到内边距区域，第二层背景画到边框区域。于是纯色盖住了中心，渐变色只露在边框上，就形成了渐变边框。

第二，渐变进度条。进度条通常由一个底槽和一个进度条组成。底槽可以用浅色背景，进度条用线性渐变填充，再加个圆角：

css复制.progress {
  height: 8px;
  border-radius: 4px;
  background: #eee;
}
.progress-bar {
  width: 60%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #36d1dc, #5b86e5);
}

这个效果非常常见，而且渐变让进度条看起来比纯色高级很多。动态加载的时候，配合transition: width 0.3s ease就能有平滑增长效果。

第三，文字渐变。效果很酷，代码很短：

css复制.gradient-text {
  background: linear-gradient(90deg, #f5af19, #f12711);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

核心就是background-clip: text，让背景只显示在文字内部，再把文字颜色设为透明。注意，有些老版本浏览器需要-webkit-前缀，而且color: transparent不能少，否则颜色会盖住渐变。

3.4 用渐变做纹理和装饰

渐变的另一种高级玩法是制造纹理。比如噪点纹理，虽然严格意义上纯CSS不好做随机噪点，但你可以用径向渐变做出一堆圆形颗粒，再配合低透明度模拟粗糙质感。

再比如，高楼玻璃幕墙的格子纹理，其实可以用多个线性渐变拼出来：

css复制background-image:
  linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
background-size: 20px 20px;

这个效果在科技类H5、游戏活动页里很常用。网格线条的颜色、透明度、间距随你调，撑起整个页面气质没有问题。

还有光照效果，比如一张产品卡片顶部加一道白色的柔和斜光，可以让卡片视觉上“鼓起来”。做法是用45度方向的线性渐变，从亮到透明：

css复制background:
  linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%),
  url(product.jpg);

背景图加高光叠加，整个卡片瞬间高级不少。这种效果用图片做也不是不行，但渐变的好处是可控、可调、不增加额外请求。

4. 常见问题与排查技巧实录

写背景样式、雪碧图、渐变这几年，踩过的坑不少。有些问题是语法层面的，查文档就能解决；有些属于经验问题，你不实际遇到根本不知道还会这样。

4.1 常见问题速查表

4.2 排查逻辑：先孤立出问题层

前面提到多背景定位混乱的问题，展开说下我的排查方法。多层背景叠加时，最稳妥的做法不是盯着代码一行行猜，而是先注释掉一半。具体来说，从最后一层开始逐层注释，每注释一次就刷新页面看效果变化。这样能快速锁定是哪一层出了问题。

定位到问题层之后，先检查background-position，再看background-size。这两个属性是一对，容易互相影响。如果background-size是cover，那background-position即使写了也可能不会按你想的那样生效，因为浏览器为了保证覆盖整个容器，会优先调整图片尺寸，定位值只会在裁剪后的基础上做偏移。这是新手最容易产生“我明明写了center为什么还是偏了”的疑问的原因。

调试雪碧图的时候，很多人不知道浏览器开发者工具是可以直接查看元素背景图的。你选中元素，在Styles面板里找到背景图，能看到一个提示，点击就能查看原始大图。我每次做雪碧图定位，都会打开这个功能，然后手动改background-position的数值，一边改一边看效果，坐标对不对一目了然，比自己空想要高效太多。

4.3 关于渐变兼容性的血泪教训

渐变这块，现在主流的现代浏览器支持度都很好，但不少老项目的用户群体还在用旧版浏览器或旧版WebView。我遇到过一个真实案例，某个活动页面用了比较新的渐变语法conic-gradient来做圆环进度条，开发的时候在Chrome里调试得好好的，上线后运营反馈说按钮中心是空白的，查了半天才发现是某款老式安卓机的系统WebView根本不支持conic-gradient。

这个教训告诉我，渐变语法一定要做好兼容性评估和降级策略。linear-gradient和radial-gradient基本上全平台安全，conic-gradient就建议判断一下，不支持的时候给个纯色背景兜底。还有background-clip: text，虽然现在支持度不错，但旧浏览器需要前缀，而且如果用户浏览器不支持，文字颜色是透明的，整个文字就消失了，这是必须做fallback的。我的习惯是写两行，一行用纯色，一行用渐变覆盖，这样不支持渐变形时至少文字还看得见。

另外，渐变常和CSS变量一起用，动态主题色靠变量控制非常方便，但注意CSS变量在渐变里的使用有个小坑：变量值里如果带逗号或者空格处理不当，整个渐变声明会直接失效。比如定义--angle: 45deg，然后写background: linear-gradient(var(--angle), red, blue)，这个没问题；但如果你把整个渐变字符串塞进变量里，然后写background: var(--gradient)，某些浏览器可能解析失败。踩过这个坑之后，我几乎都只把变量的值控制在单色或简单数值上，不在变量里拼整个渐变表达式。

4.4 性能与维护的平衡建议

最后聊几句背景样式和性能的关系。雪碧图减少请求数量是好事，但请务必控制单张图片的大小。如果20个图标拼成一张图之后体积比20张小图加起来还大，那就失去意义了。拼图工具通常会提供压缩选项，建议开启PNG量化，或者直接用WebP格式做雪碧图，体积能小很多。另外，雪碧图只适合低频改动、不重复换肤的图标集合，如果产品迭代频繁，新图标一多就重新拼图，维护成本实在太高，这种情况下SVG Sprite更合适。

渐变本质是浏览器实时绘制，所以复杂渐变在同一页面大量使用会产生一定的渲染开销，尤其是手机端低端机。我的经验是，单页内渐变层数量控制在两三层以内，尽量别把十个八个大尺寸渐变堆在同一屏，否则页面滚动的流畅度会明显下降。如果真的需要大量渐变纹理，把纹理生成成一张基础图片，用background-repeat平铺，性能和显示效果往往反而更好。

另外，背景样式的简写能极大减少代码量，但简写有一个默认重置的坑：只要使用了background简写，所有没写的子属性都会被重置为默认值。比如你本来只想改个背景色，写成background: #fff，结果之前的background-size、background-position全部没了。所以我的建议是，背景属性多的时候拆开写，单层背景或简单场景下用简写，不要混用。

CSS背景、雪碧图和渐变这三块，说实话都不算难，但它们组合起来能做的事情非常多。从最简单的页面背景、按钮样式，到复杂的图标方案和视觉装饰，只要你把属性之间的关系理顺了，很多看起来“只能靠图片”的效果，用纯CSS两分钟就能搞定。我第一次用渐变做出立体感按钮、第一次用雪碧图把十几个图标合并成一次请求的时候，都明显感觉到CSS的掌控力上了一个台阶。希望你读完这篇也能有同样的感觉。