用 background-size: cover 可让背景图等比缩放并完全覆盖容器而不变形，需配合 background-position 定位和 html/body 高度链（如 html{height:100%}、body{min-height:100vh}），避免使用 100% 100% 或遗漏高度设置。
用 background-size: cover 配合正确的高度链和定位控制，就能让背景图铺满容器又保持比例不变形。关键不是拉伸，而是等比缩放+智能裁剪。
核心写法：cover + 定位 + 高度保障
直接在目标容器（比如 body 或某个 section）上写：
- background-image：指定图片路径
- background-size: cover：等比缩放，确保完全覆盖容器（不拉伸、不变形）
-
background-position：显式设为
center、top center等，避免关键内容被意外裁掉 -
height 保障：父级（如
html和body）必须有明确高度，推荐：html { height: 100%; }<br>body { min-height: 100vh; margin: 0; }
别踩这两个坑
很多“铺不满”或“变形”的问题，其实出在这两处：
-
别用
background-size: 100% 100%：它强制拉伸，人像变胖、文字糊、横屏手机上头顶消失都是它干的 -
别漏掉高度链：如果
html和body没设高度，背景图再大也只显示一截——浏览器默认它们高度是“内容高”，不是“视口高”
进阶优化建议
让效果更稳、更专业：
-
加渐变叠层：用
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...)提升文字可读性 -
响应式加载：大图配
srcset或媒体查询切换不同尺寸背景图，避免手机下加载桌面图 -
慎用 fixed：
background-attachment: fixed在滚动时容易跳变或局部模糊，优先考虑用transform模拟视差
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
