用CSS渐变替代装饰性图片可零请求实现视觉效果，适合按钮背景、卡片阴影、分隔线、圆角容器遮罩及柔化遮罩等修饰图；需用background-image、加WebKit前缀、规范方向与颜色停靠点，并支持多层叠加和深色模式适配。
直接用 CSS 渐变（linear-gradient 或 radial-gradient）替代装饰性图片，是减少 HTTP 请求最有效的方式之一。这类图片本身不传递关键信息，却每次都要发起一次网络请求——而纯 CSS 渐变完全由浏览器渲染，零请求、零加载延迟。
哪些图片适合被渐变替代
以下几类常见修饰图，基本都可以用 CSS 渐变无缝替换：
- 按钮背景（如蓝→浅蓝线性渐变的“高光”按钮）
- 卡片/模块的微妙阴影过渡层（用带透明度的径向渐变模拟）
- 分隔线或边框的渐变色条（不用切细长图）
- 圆角+内阴影的容器（过去靠四张角图拼接，现在一个
border-radius+box-shadow或渐变遮罩即可） - 页面顶部/底部的柔化遮罩（如
linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.2))叠在背景图上）
正确写法：确保渐变生效不白忙
很多人写了 background: linear-gradient(...) 却没效果，问题常出在语法和兼容细节上：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 必须用
background-image，而不是简写的background（除非你明确覆盖全部背景属性） - 旧版 Safari（iOS 9.3 及更早）、Android Browser 需加
-webkit-linear-gradient前缀 - 方向写
to top，别写top（后者是已废弃的旧语法） - 颜色停靠点推荐用百分比（如
#fff 30%, #000 70%），避免模糊的from/to - 示例（安全可用）：
div {
background-image: -webkit-linear-gradient(to right, #4facfe, #00f2fe);
background-image: linear-gradient(to right, #4facfe, #00f2fe);
}
进阶技巧：渐变叠加与性能兼顾
不是所有场景都只用一层渐变。合理叠加可替代更多图片组合，同时保持请求为零：
- 用逗号分隔多层
background-image：比如一张底图 + 一层透明渐变遮罩（实现局部淡化），background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4)), url(bg.jpg); - 径向渐变做按钮高光时，显式声明形状和位置：
radial-gradient(circle at 20px 20px, #fff 0%, transparent 50%)，比默认中心更可控 - 避免在动画中频繁重绘渐变背景；如需动效，优先用
background-position移动渐变（配合background-size超出范围）而非改变颜色值
最后一步：和设计师对齐设计意图
渐变替代图片不是技术炫技，而是协同优化。建议在开发前确认：
- 该图是否承载语义或品牌色？若是，保留并压缩；若只是“看起来更精致”，就交给 CSS
- 是否需要适配深色模式？CSS 渐变可配合
@media (prefers-color-scheme: dark)动态切换 - 文字在渐变背景上的可读性是否达标？用 Chrome DevTools 的 Contrast 检测工具实测关键区域对比度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
