多背景中渐变与图片用逗号分隔，顺序决定图层上下：渐变在前可作蒙版，图片在前则浮于渐变底色；需为每层单独设置background-size和background-position，否则默认拉伸导致模糊或错位。
background-image里怎么同时写渐变和图片
直接用逗号分隔两个linear-gradient()和url()，顺序决定图层上下关系：写在前面的在上面。浏览器会把它们当多层背景叠在一起渲染，不需要额外容器或伪元素。
- 渐变写前面 → 盖在图片上（常用做蒙版、暗化文字区）
- 图片写前面 → 渐变当底色，图片浮在上面（少见，容易糊）
- 必须加
background-size和background-position单独控制每层，否则默认都拉伸铺满
为什么图片模糊或拉伸变形
因为background-size: cover或100% 100%作用于所有层，而渐变没有“原始尺寸”，会强行撑满，导致图片被二次缩放。真实场景中，你几乎总要给每层单独设尺寸。
- 推荐写法：
background-size: cover, 100% 100%→ 第一层（渐变）cover，第二层（图片）等比缩放填满 - 更稳妥：显式写两遍
background-size，比如background-size: 100% 100%, cover，靠顺序对应 - 别依赖
background-repeat: no-repeat就以为能对齐——没background-position，渐变和图片的“中心点”可能错开
linear-gradient透明度写法踩坑
用rgba()写颜色时，alpha值太小（比如rgba(0,0,0,0.1)）在深色图上几乎看不出效果；太大（0.8）又盖住图片细节。关键不是调透明度，而是选对渐变方向和起止位置。
- 文字可读性优先：用
linear-gradient(to right, rgba(0,0,0,0.6), transparent)从左往右淡出，留右边清晰区放标题 - 避免
to bottom配深色图——顶部文字直接吞没；换成to top或斜向更安全 - 别用
hsla()想“调色”，CSS里它和rgba()在渐变中行为一致，但可读性差，容易调错
兼容性与性能注意点
所有现代浏览器都支持多背景+渐变，IE10+也行，但IE10不支持background-size按层写（只认最后一个值），所以IE下必须用降级方案：单层url() + :before伪元素叠渐变。
立即学习“前端免费学习笔记（深入）”；
- 移动端Safari旧版本（iOS 9）对
background-blend-mode敏感，但这里不用它，所以无影响 - 渐变本身零性能开销，但
url()图片过大时，叠加层会让GPU多画一次——确保图片已压缩，background-size: cover别用在高清大图上 - 调试时临时加
background-color: red看哪层生效，比猜z-index靠谱
background-position没对齐——渐变从左顶开始，图片却居中，结果黑条只盖住左上角。动手前先用background-position: center, center统一锚点，再微调。 
