如何使多个 CSS 背景图像流体响应？答案

【问题标题】：How to make multiple CSS background-images fluid responsive?如何使多个 CSS 背景图像流体响应？
【发布时间】：2013-04-16 22:51:35
【问题描述】：

我正在创建一个流畅的响应式网站，其中包含多个包含 CSS 背景图像的部分。我将如何使这些图像具有流畅的响应性？我知道如何使用标准标签执行此操作，但无法为 CSS 背景图像解决此问题。正如您在下面看到的，每个标签都将在我的 CSS 中包含一个背景图像。

我的网站结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
</head>
<body>
    <section id="background-image-one"></section>
    <section id="background-image-two"></section>
    <section id="background-image-three"></section>
</body>
</html>

【问题讨论】：

将您的 CSS 添加到问题中。会更有帮助
您可以先将内容放在各个部分中。默认情况下，没有任何内容的块元素的高度为 0px，因此您不会看到它。

标签： html css responsive-design

【解决方案1】：

您可以使用 background-size 缩放图像，这应该适用于大多数移动设备 - 但不适用于某些较旧的桌面浏览器（通常的嫌疑人）。不过这不会缩小图像，因此可能值得看一下http://adaptive-images.com/ 之类的东西，它可以将不同尺寸的图像提供给具有不同屏幕尺寸的设备。注：没有不同的视口大小。

【讨论】：

啊...快了 1 分钟。是的，这就是答案。您可以像这样设置background-size background-size:100% 100% 它会缩小图像。
换句话说，我会将 background-size: 100% 100% 应用于上述每个带有 id 的部分？