如何使多个CSS背景图像具有响应性？

Question

I am creating a fluid responsive website that contains multiple sections that incorporate CSS background images. 我正在创建一个流畅的网站，其中包含包含CSS背景图片的多个部分。 How would I go about making these images fluid responsive? 我将如何使这些图像具有流体响应性？ I am aware of how to do this with a standard tag but can't see to figure this out for CSS background images. 我知道如何使用标准标记执行此操作，但是看不到CSS背景图片能解决这个问题。 As you can see below the tags will each contain a background-image in my CSS. 正如您在下面看到的，每个标签在CSS中都包含一个背景图片。

My Site Structure: 我的网站结构：

<!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

You can use background-size which will scale the images this should work on most mobile devices - not on some older desktop browsers though (the usual suspects). 您可以使用background-size来缩放将在大多数移动设备上运行的图像-尽管在某些较旧的桌面浏览器上却不行（通常是怀疑的）。 This will not shrink the image though so it might worth looking at something like this http://adaptive-images.com/ which can server images of different sizes to devices with different screen sizes. 但是，这不会缩小图像，因此可能值得看一下类似http://adaptive-images.com/的内容，它可以将不同大小的图像存储到具有不同屏幕尺寸的设备上。 NB not different viewport sizes. 注意视口大小没有不同。

如何使多个CSS背景图像具有响应性？

问题描述

1 个解决方案

解决方案1
1 2013-04-16 14:50:20

如何使多个CSS背景图像具有响应性？

问题描述

1 个解决方案

解决方案1 1 2013-04-16 14:50:20

解决方案1
1 2013-04-16 14:50:20