html - 通过 html5 和 css3 调整背景图像的大小

Question

在这个论坛上，我读到我需要使用 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'); 
} 

Answer 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 .