在这个论坛中,我读到我需要使用 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');
}
最佳答案
这是一个例子。 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 .
关于html - 通过 html5 和 css3 调整背景图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14401092/