在这个论坛中,我读到我需要使用JQ来调整背景图像的大小。但我不知道JQ,想要通过css3调整背景图像的大小。我可以做吗?请尽可能告诉我正确的方向。
我有两张背景图片。一个 - 重复的纹理(我不想缩放它),另一个 - 下面 - 整个图片(这个我不想重复,并希望在网站更改分辨率时调整大小(对于小屏幕上的ex)。
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');
}
答案 0 :(得分:3)
这是一个例子。 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。