使用 background-size: cover 可以确保背景图片铺满容器，其核心机制是保持图片原始宽高比进行缩放，直到完全覆盖元素区域。具体做法是在 css 中同时设置 background-size: cover 和 background-position: center，这样图片会居中显示并填满空间，多余部分会被裁剪。若图片尺寸小于容器，它会自动放大；若大于容器，则按比例缩小直至触及边界。
cover 与 contain 在布局中的视觉差异是什么
两者的主要区别在于处理“未填满”或“超出”区域的策略不同。cover 优先保证无空白，可能裁剪图片内容；contain 优先保证图片完整，可能留白。通过对比同一张图片在不同模式下的表现，可以直观看到这种取舍。
/* HTML 结构示例 */
<div class="container">
@@##@@
</div>
/* CSS 样式对比 */
.container {
width: 400px;
height: 300px;
border: 2px solid #333;
}
/* 方案 A: Cover - 铺满但可能裁剪 */
.cover-mode {
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 方案 B: Contain - 完整但可能留白 */
.contain-mode {
background-image: url('photo.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
当容器为 400x300 像素，图片为 800x600 像素时，两者表现一致。但当图片为 800x400 像素（宽扁）时，cover 会将图片高度拉伸至 300px（宽度变为 600px），左右各裁掉 100px；而 contain 会将宽度设为 400px（高度变为 200px），上下各留 50px 空白。开发者应根据是否需要保留图片边缘信息来选择模式。
为什么背景图模糊或变形了
背景图出现模糊或变形通常是因为源图片分辨率不足或浏览器强制拉伸导致像素化。要解决此问题，需确保源图片分辨率高于容器尺寸，并检查是否意外设置了 background-repeat 或其他冲突属性。此外，高 DPI 屏幕下建议使用两倍图以维持清晰度。
/* 优化后的最佳实践代码 */
.hero-section {
/* 基础背景设置 */
background-image: url('hero-bg@2x.jpg'); /* 使用高分辨率图片 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* 性能优化：避免重绘 */
will-change: transform;
/* 兼容性回退 */
background-color: #f0f0f0; /* 加载失败时的底色 */
}
在实际开发中，若发现图片模糊，首先检查网络请求的图片尺寸是否至少为容器尺寸的 1.5 到 2 倍。其次，确认没有在其他地方通过 transform: scale() 对元素进行非整数倍缩放，这会加剧模糊。最后，确保 background-attachment 未被设置为 fixed 且在移动端引发滚动性能问题，必要时可移除该属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
