全屏背景图不拉伸变形的关键是使用 background-size: cover，配合 html 和 body 的 height: 100% 及容器 min-height: 100vh；遮罩需用伪元素实现并确保定位上下文正确；移动端应按屏幕尺寸切换压缩图；遮罩透明度、文字阴影与图片需协同调试以保障可读性。
背景图全屏且不拉伸变形的关键设置
直接用 background-size: cover 是最稳妥的选择，它会等比缩放图片填满整个容器，自动裁切超出部分。别用 100% 100% 或 contain——前者必然拉伸，后者留白明显，都不满足“全屏遮罩”需求。
常见错误是只设了 height: 100% 却没处理父级高度继承问题，导致背景图只显示一截。必须确保 html 和 body 都设为 height: 100%，否则 min-height: 100vh 才是更可靠的兜底方案。
html, body { height: 100%; margin: 0; }- 给背景容器（如
<div class="hero">）设min-height: 100vh，而非height: 100vh，避免内容撑高时被截断 - 加
background-attachment: fixed要谨慎：iOS Safari 和部分安卓浏览器滚动时会出现闪烁或卡顿
叠加半透明遮罩层的两种可靠写法
遮罩不是靠 background-color 叠加在图片上（那样会盖住整个背景），而是用伪元素或额外 div 层叠。推荐用 ::before 伪元素，结构干净、无需额外标签。
容易忽略的是 z-index 层级和定位上下文。伪元素必须配合 position: absolute，且父容器得是 position: relative，否则遮罩会脱离背景区域。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
position: relative .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }- 如果遮罩要响应式调整透明度，直接改
rgba()第四个参数，别用opacity——它会让内部文字也变透明
移动端适配中图片加载与渲染的坑
大图在移动设备上容易触发内存警告或加载失败，尤其 iOS WebKit 对单张背景图大小有限制（实测超过 3MB 易出问题）。不能只靠 CSS 响应式，得从资源源头控制。
background-image 不支持 srcset，所以必须用媒体查询切换不同尺寸图，或改用 <picture> + 内联样式动态注入，但后者复杂度高。务实做法是用两套图：
- 桌面端用
background-image: url("bg-desktop.jpg") - 用
@media (max-width: 768px)切换为压缩过的bg-mobile.jpg（宽度 ≤ 1200px，质量 60–70） - 加
background-repeat: no-repeat和background-position: center center，防止小图在高端屏上因 DPR 导致偏移
文字可读性与遮罩对比度的实际调试
遮罩不是越黑越好。rgba(0,0,0,0.5) 在深色图上可能让白字发灰，rgba(255,255,255,0.2) 在浅图上又压不住亮度。得根据图的主色调动态调参，没有万能值。
真正在意可读性的话，别只靠肉眼判断。用浏览器开发者工具临时修改 rgba 的 alpha 值，同时打开“颜色对比度检查”（Chrome DevTools 的 Accessibility 面板），确保文字与遮罩层组合后的对比度 ≥ 4.5:1。
- 标题文字建议用
text-shadow: 0 2px 4px rgba(0,0,0,0.5)强化边缘，尤其当背景纹理复杂时 - 避免把遮罩层和文字放在同一 z-index 层，文字必须在遮罩上方（
z-index: 2），否则阴影会被遮罩吃掉 - 如果背景图明暗不均（比如左亮右暗），纯色遮罩会暴露问题——这时该考虑用线性渐变遮罩：
background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2))
遮罩层的透明度、图片尺寸、文字阴影这三者得一起调，单独改一个往往没用。实际项目里，最好拿几类典型图（纯色、风景、人像）各测一遍，而不是只在一张图上调试完就上线。
