Question

我正在创建一个流畅的响应式网站，其中包含多个包含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>

Answer 1

您可以使用background-size来扩展这些应该在大多数移动设备上运行的图像 - 而不是在某些较旧的桌面浏览器上（通常的嫌疑人）。这不会缩小图像，因此可能值得查看类似http://adaptive-images.com/的内容，它可以将不同大小的图像服务于具有不同屏幕尺寸的设备。注：视口大小不同。

如何使多个CSS背景图像流畅响应？

1 个答案: