在CSS里，背景图片并不只是用一张jpg或png铺在盒子里。规范提供了一系列背景图片函数，它们可以直接作为background-image的值，让浏览器在渲染时动态生成图像或按需选择资源。掌握这些函数，对控制视觉效果和减少网络请求都有实质帮助。
一、url函数：最基础的资源引入
url函数是大家最熟悉的背景图片函数，它用来引用外部图像文件。写法上可以写成带引号或不带引号的路径，浏览器都能解析。在复杂布局中，我们常把它和其他渐变函数叠加，形成底图加纹理的效果。
需要注意，url里的路径如果是相对地址，是相对于当前CSS文件所在位置解析的。如果项目用了构建工具，打包后目录结构变化，就容易出现404。下面演示一个最基础的用法：
.box {
width: 300px;
height: 200px;
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
}
上面的代码让盒子以覆盖方式显示bg.png。若图片不存在，背景就透明，不会报错但会影响视觉。实际开发中建议配合background-color留底，避免空白突兀。
二、linear-gradient：线性渐变函数
linear-gradient是生成线性渐变背景的函数，不需要任何图片文件。它至少接收两个颜色断点，还可指定渐变方向。方向可以用角度如45deg，也可以用to right这种关键字。颜色断点后可跟位置百分比，控制色彩过渡的起止。
很多人误以为渐变只能做简单的双色过渡，其实通过多个断点能模拟出条纹、光影等效果。下面的例子用线性渐变做出了斜向条纹背景：
.stripes {
background-image: linear-gradient(
45deg,
#409eff 25%,
#fff 25%,
#fff 50%,
#409eff 50%,
#409eff 75%,
#fff 75%,
#fff 100%
);
background-size: 40px 40px;
}
这里将background-size设为40px见方，让渐变图案重复平铺，形成条纹。线性渐变作为背景图片函数，本质是由浏览器绘制的图像，因此可以用在background-image里与其他函数叠加，也能被background-position移动。
三、radial-gradient与conic-gradient
radial-gradient生成从圆心向外扩散的径向渐变，适合做聚光灯、按钮高光。它的语法里可定义圆心位置、形状是圆还是椭圆，以及颜色断点。conic-gradient则从中心点按角度旋转着色，能实现饼图、色环等效果。
这两个函数同样不依赖图片，纯CSS绘制。下面的代码分别展示了基本用法：
.radial {
background-image: radial-gradient(circle at 50% 50%, #ff9900, #333);
}
.conic {
background-image: conic-gradient(#f00, #0f0, #00f, #f00);
}
radial-gradient里circle at 50% 50%表示以元素中心为圆点。conic-gradient按顺序环绕分布颜色，首尾同色可消除接缝。它们在仪表盘、标签云等场景中比切图更灵活，也更易于随主题切换颜色。
四、image-set函数：按设备选图
image-set函数允许在CSS里针对不同的分辨率或像素密度提供多张图，浏览器自动选合适的那张。它解决了一倍屏和二倍屏下背景图清晰度的矛盾，而不必写媒体查询。
语法上，image-set接收若干url加描述符的组合，比如1x、2x。下面示例让高清屏加载倍图：
.retina {
background-image: image-set(
url("logo.png") 1x,
url("logo@2x.png") 2x
);
}
使用image-set时，若浏览器不支持，会忽略整条声明，因此最好前面写一条普通url做兜底。它和picture标签的思路类似，但作用在背景图上，对装饰性素材尤其有用。
五、多函数叠加与层序
background-image支持逗号分隔多个值，这意味着可以把url、linear-gradient等函数叠放。先写的层在上方，后写的在下方。善用叠加能减少DOM节点，比如用渐变遮罩压在照片上。
看一个叠加案例，照片为底，半透明渐变做暗化便于放文字：
.card {
background-image:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url("photo.jpg");
background-size: cover, cover;
background-position: center, center;
}
这里线性渐变因写在前面，盖在照片之上。两个背景的size与position用逗号一一对应。如果顺序写反，渐变就被照片挡住，文字可读性会变差。理解层序是玩转背景图片函数的关键一步。
六、常见误区与性能注意
一个常见错误是把渐变函数当成background-color用，例如写background: linear-gradient(...)。这虽能生效，但语义上background是简写，会重置其他背景属性。建议用background-image明确意图，减少副作用。
性能方面，复杂conic-gradient在大面积平铺时可能增加绘制成本。移动端应避免超大尺寸背景配合高频重绘。若效果可用静态图替代且体积更小，就应权衡选择。合理使用这些函数，才能让样式既好看又流畅。
CSSbackground_imagelinear_gradient修改时间：2026-08-04 13:30:36