瑜妩写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;