看看今天流行的网站，你肯定会看到一个设计处理是大屏幕的背景图像。添加这些图像的挑战之一来自于最佳实践，即网站必须响应不同的屏幕大小和设备，这种方法称为响应式网页设计。

多屏一图

由于您的网站的布局随着屏幕大小的不同而变化和缩放，因此这些背景图像也必须相应地缩放其大小。事实上，这些“流体图像”是响应性网站（以及流体网格和媒体查询）的关键部分之一。这三个部分从一开始就是响应式web设计的主要部分，但尽管将响应式内联图像添加到站点（内联图像是作为HTML标记的一部分进行编码的图形）一直相当容易，长期以来，对背景图像（使用CSS背景属性设置页面样式）的处理一直是许多web设计师和前端开发人员面临的重大挑战。谢天谢地，CSS中添加的“背景大小”属性使这成为可能。

在另一篇文章中，我们介绍了如何使用CSS3属性background size来拉伸图像以适应窗口，但是有一种更好、更有用的方法来部署此属性。为此，我们将使用以下属性和值组合：

cover关键字属性告诉浏览器缩放图像以适应窗口，而不管窗口有多大或多小。图像被缩放以覆盖整个屏幕，但原始比例和纵横比保持不变，防止图像本身被扭曲。将图像尽可能大地放置在窗口中，以便覆盖整个窗口表面。这意味着您的页面中不会出现任何空白点或图像上的任何失真，但也意味着根据屏幕和相关图像的纵横比，可能会修剪部分图像。例如，图像的边缘（顶部、底部、左侧或右侧）可能会在图像上被截断，具体取决于用于“背景位置”属性的值。如果将背景定向为“左上”，图像上的任何多余部分都将从底部和右侧脱落。如果将背景图像居中，多余部分将从所有边上消失，但由于多余部分分散开来，因此对任何一侧的影响都会减小。

如何使用“背景尺寸：封面；”

在创建背景图像时，最好创建一个相当大的图像。虽然浏览器可以使图像变小而不会对视觉质量产生明显影响，但当浏览器将图像放大到大于其原始尺寸时，视觉质量将降低，变得模糊和像素化。这样做的缺点是，当您向所有屏幕传送巨型图像时，页面的性能会受到影响。执行此操作时，请确保为下载速度和web交付正确准备这些图像。最后，您需要在足够大的图像大小和质量以及适合下载速度的合理文件大小之间找到一个令人满意的媒介。

使用缩放背景图像的一种常见方法是，当您希望该图像占据页面的整个背景时，无论该页面是宽的，在桌面计算机上查看，还是小得多，并发送到手持移动设备。

将图像上载到web主机，并将其作为背景图像添加到CSS中：

首先添加以CSS为前缀的浏览器：

然后添加CSS属性：

使用适合不同设备的不同图像

尽管台式机或笔记本电脑体验的响应性设计很重要，但可以访问web的设备种类已经显著增加，屏幕尺寸也随之增加。

如前所述，例如，在智能手机上加载非常大的响应性背景图像不是一种高效或有带宽意识的设计。

了解如何使用媒体查询提供适合其显示设备的图像，并进一步提高网站与移动设备的兼容性。