在现代网页设计中，全屏背景图（full-page background image）是提升视觉吸引力的常用手段。然而，如何让背景图完美地自适应不同尺寸的浏览器视口，同时避免图片裁剪、留白或变形，是许多初学者乃至经验丰富的开发者都会遇到的挑战。常见的background-size属性值如cover和contain，虽然功能强大，但在特定需求下可能无法达到预期效果。例如，cover属性会确保背景图完全覆盖元素，但可能会裁剪掉图片的部分边缘；而contain属性则会确保图片完整显示，但当图片与元素比例不符时，可能会在两侧或上下留下空白区域。
核心解决方案：background-size: 100% 100%
针对需要背景图完全拉伸以填充整个视口，无论视口比例如何变化的场景，CSS提供了一个直接且有效的解决方案：background-size: 100% 100%;。这个属性值强制背景图的宽度和高度都拉伸至其容器的100%，从而实现完全填充。
代码示例
要将背景图设置为全屏并完全填充视口，通常将这些CSS属性应用于html或body元素。考虑到html元素通常代表整个文档的根，将其设置为背景容器更为常见。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏背景图示例</title>
<style>
/* 重置默认样式，确保html和body占据整个视口 */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/* overflow: hidden; */ /* 如果背景图只是装饰，可以防止滚动条出现 */
}
/* 应用背景图样式到html元素 */
html {
background-image: url('https://i.sstatic.net/3Xdg1.jpg');
background-position: center; /* 背景图居中显示 */
background-repeat: no-repeat; /* 防止背景图重复 */
background-size: 100% 100%; /* 关键属性：强制拉伸填充整个视口 */
background-attachment: fixed; /* 可选：使背景图固定，不随内容滚动 */
}
/* 示例内容，确保页面有可滚动内容来测试 background-attachment: fixed */
body {
min-height 
