1. 前言
CSS 中的背景图片作为页面美化的重要元素之一，经常被用来为某个或某些元素添加背景图像。但是，对于不同屏幕分辨率和不同设备尺寸的网页浏览器，如何让背景图片自适应大小呢？本文将详细介绍 CSS 设置背景图片自适应大小的几种方法。
2. 设置背景图片自适应大小
2.1 使用 background-size 属性
background-size 属性是 CSS3 新增的属性，可以用来设置背景图片的尺寸大小，包括背景图片的宽度和高度。
根据 background-size 属性的定义，我们可以设置如下 CSS 样式：
background-size: 宽度 高度;
其中，宽度和高度可以用像素值、百分比、cover 和 contain 来设置。
2.1.1 使用像素值设置
使用像素值设置 background-size 属性，可以指定背景图片的宽度和高度具体的像素值，比如：
background-size: 800px 600px;
上面的样式代码将背景图片的大小设置为宽度为 800 像素，高度为 600 像素。
2.1.2 使用百分比设置
使用百分比设置背景图片的大小，则可以根据浏览器窗口的大小自适应适当的大小，比如：
background-size: 50% 50%;
上面的样式代码，将背景图片设置为宽度和高度都为浏览器窗口的 50%。
2.1.3 使用 cover 设置
使用 cover 设置背景图片的大小，则会将图片覆盖整个元素，同时尽量保持图片比例不变，比如：
background-size: cover;
上面的样式代码，将背景图片设置为尽量占满整个元素，同时比例不变。
2.1.4 使用 contain 设置
与 cover 相反，使用 contain 设置背景图片的大小，则不会让图片超出元素范围，同时保持图片比例不变，比如：
background-size: contain;
上面的样式代码，将背景图片调整大小，让其完全适应元素大小，同时比例不变。
2.2 使用 background-position 属性
除了 background-size 属性，background-position 属性也可以用来调整背景图片的显示位置。在设置背景图片大小固定时，通过调整背景图片的显示位置，从而达到自适应的效果。
与 background-size 属性类似，background-position 属性也是 CSS3 中新增的属性。其定义如下：
background-position: 水平位置 垂直位置;
其中，水平位置和垂直位置可以用如下的值来设定：
left
center
right
top
bottom
像素值
百分比
2.2.1 使用百分比设置
与 background-size 属性一样，使用百分比值可以让背景图片相对于元素自适应大小，从而达到适应不同浏览器窗口大小的效果。
background-position: 50% 50%;
上面的样式代码，将背景图片在元素中心显示，从而达到居中、自适应的效果。
2.2.2 使用像素值设定
如果我们想让背景图片始终定位在元素的左上角，则可以使用如下 CSS 样式：
background-position: 0 0;
2.2.3 混合使用
如果要达到更灵活的效果，我们可以将 background-size 和 background-position 属性结合使用，从而实现不同尺寸背景图片的自适应显示效果。
background-size: cover;
background-position: center;
上面的样式代码，将背景图片设置为尽可能占满元素，同时位于元素中心位置。
3. 总结
通过 background-size 和 background-position 属性的灵活运用，我们可以实现背景图片的自适应显示，从而适应不同设备尺寸和不同屏幕分辨率的浏览器。
注意：在使用百分比设置 background-size 和 background-position 属性时，一定要注意设置元素的宽度和高度，否则会导致属性值无效。