通过 html5 和 css3 调整背景图像的大小答案

【问题标题】：Resize background-image by html5 and css3通过 html5 和 css3 调整背景图像的大小
【发布时间】：2013-01-18 23:08:21
【问题描述】：

在这个论坛中，我读到我需要使用 JQ 来调整背景图像的大小。但我不知道 JQ 并想通过 css3 调整背景图像的大小。我可以做吗？如果可能的话，请告诉我正确的方向。

我有两张背景图片。一个 - 带有重复的纹理（我不想缩放它），另一个 - 在下面 - 整个图片（这个我不想重复并且想在站点更改分辨率时调整大小（例如在小屏幕上）。

    body { 
     padding-top: 60px; 
     padding-bottom: 40px;
     background-color:#ededed;
     background-image:url('http://b.pusku.com/wp-content/uploads/2012/11/textura5.png'), url('http://b.pusku.com/wp-content/uploads/2012/11/fone1.jpg'); 
}

【问题讨论】：

可能重复stackoverflow.com/questions/10991216/…
还有这个stackoverflow.com/questions/5867908/…
谢谢！但我无法理解如何在代码中只选择一张图像。这些示例只有一张图片
给图像一个类别并以这种方式设置它的样式。 <img class="classname" > 并在您的 CSS 中输入 .classname { /* styles for the image here */ }
第二个链接是两个背景图片，比如 background-size: 2em 2em, 100% 100%;

标签： html css

【解决方案1】：

这是一个例子。 40% 20% 部分是第一张图片的尺寸，20% 15% 部分是第二张图片的尺寸。然后，重复规则指定第一个图像不重复，而第二个图像重复。

 body { 
     padding-top: 60px; 
     padding-bottom: 40px;
     background-color:#ededed;
     background-image:url('http://upload.wikimedia.org/wikipedia/commons/c/cb/Fighting_kittens-1340.jpg'), url('http://thepersiankittens.com/Persian_Kittens.jpg'); 
     height: 1000px;
     width: 400px;
     background-size: 40% 20%, 20% 15%;
      background-repeat: no-repeat, repeat;
    }

这是一个您可以使用http://jsbin.com/ojudel/1/edit 的示例

更改百分比，您将看到它是如何工作的。更多信息可以找到here。

【讨论】：

非常感谢您的所有回答！我尝试了所有示例，就我而言 - 2em 2em，100% 100% - 效果很好！我看到我需要更多地了解这个 css3 规则，我会更多地使用 jsbin。只有一件事我不能做 - 在我的流畅布局中保存背景图片的比例。
@Lucky 你应该能够让它以一种或另一种方式工作，使用 auto 作为大小，但响应位完全是另一回事:)
Mookamafoob，非常感谢您的回答！我将在我的流畅布局中使用 auto :)