重复 css 背景图像一定次数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2949606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
repeat css background image a set number of times
提问by Moudy
is there a way to set the number of times a background image repeats with css?
有没有办法用css设置背景图像重复的次数？
回答by franzlorenzon
An ugly hack could be inserting multiple times —statically— the same image (using multiple backgrounds):
一个丑陋的 hack 可能会多次——静态地——插入相同的图像（使用多个背景）：
E.g. To repeat horizontally an image (80x80) three times:
例如，要水平重复图像 (80x80) 三次：
background-image: url('bg_texture.png'),
url('bg_texture.png'),
url('bg_texture.png');
background-repeat: no-repeat,
no-repeat,
no-repeat;
background-position: 0 top,
80px top,
160px top;
Beware: not working on IE under 9 version (source).
当心：不能在 9 版本下的 IE 上工作（来源）。
回答by jantimon
no.
不。
you might set a absolute width for a box but there is no css option to repeat the image n times.
您可以为框设置绝对宽度，但没有 css 选项可以重复图像 n 次。
回答by Ryan Dsouza
You can combine a little jQuery with CSS to achieve what you want.
Say you want to display the image foo.png 3 times horizontally and 2 times vertically.
你可以结合一点 jQuery 和 CSS 来实现你想要的。
假设您想将图像 foo.png 水平显示 3 次，垂直显示 2 次。
CSS:
CSS：
body {
background: url('foo.png');
}
jQuery:
jQuery：
$(document).ready(function() {
$('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px');
});
Additionally, you could paste the same code within $(window).resize() to get a dynamic response.
此外，您可以在 $(window).resize() 中粘贴相同的代码以获得动态响应。
回答by gcbenison
I'm not sure what originally motivated this question, but I found it searching for a way to make sure only an integral number of copies of a background image appears (i.e. do not crop the final member of a repeated set of background images.) That can be achieved via the background-repeat: spaceproperty.
我不确定最初提出这个问题的动机是什么，但我发现它正在寻找一种方法来确保只出现背景图像的整数个副本（即不裁剪重复的背景图像集的最后一个成员。）这可以通过background-repeat: space属性来实现。
回答by Oliver
Whilst not strictly repeating an image x-number of times, as @gcbenison stated, you can use the background-repeat: spaceproperty or, similarly, the background-position: roundand combine either of these with background-sizeto ensure a set number of repetitions for a background image are shown, and then perhaps adjust the size of the wrapper to accomodate.
虽然不严格重复图像 x 次，如@gcbenison 所述，但您可以使用该background-repeat: space属性，或者类似地，background-position: round将这些属性中的任何一个与组合background-size以确保显示背景图像的重复次数，然后也许调整包装纸的大小以适应。
Both spaceand repeatwill repeat a background image infinitely as long as the entire image can be shown, though for any remainder spacewill add a gap between the images whilst roundwill scale the images. Put simply, if the background image fits 3.342 times vertically then both spaceand roundwill show the image 3 times, with spaceadding a gap between each repeated image, and roundscaling the images up (or down, if necessary) to fill the gap.
既space和repeat将重复的背景图像无限只要可以显示整幅图像，但对于任何剩余space将在图像之间增加一个间隙，同时round将缩放图像。简单地说，如果背景图像适合3.342倍垂直则两个space和round将显示图像3次，用space将每个重复的图像之间的间隙，和round（或向下如有必要）缩放所述图像，以填补该间隙。
If you thus wanted to repeat an image 5 times, with each image being 20px wide and spaced 5px between, you could simply do this:
因此，如果您想将图像重复 5 次，每个图像的宽度为 20 像素，之间的间距为 5 像素，您可以简单地执行以下操作：
.star-rating {
width: 120px;
background-image: url('example.jpg');
background-repeat: space;
background-size: 20px auto;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
The other option (if you cannot set the width) is to use the solution from @franzlorenzon and simply declare the background x-number of times using the multiple background CSS property.
另一个选项（如果您无法设置宽度）是使用来自@franzlorenzon 的解决方案，并使用多背景 CSS 属性简单地声明背景 x 次。
In addition, you can save typing out multiple lines using SASS by creating a @forloop like so:
此外，您可以通过创建一个@for循环来使用 SASS 保存多行输入，如下所示：
$image_count: 5;
$image_url: 'url(star.svg)';
$image_position: '0';
@for $i from 1 through ($image_count - 1) {
$image_url: #{ $image_url+', '+$image_url };
$image_position: #{ $image_position+', '+($i * (100% / $image_count)) };
}
.star-rating {
background-image: $image_url;
background-position: $image_position;
background-size: 20px;
background-repeat: no-repeat;
}
This will then generate the background images, all evenly spaced out. Additionally feel free to change ($i * (100% / $image_count))to ($i * VALUE)for fixed spacing.
这将生成背景图像，全部均匀分布。此外随意更改($i * (100% / $image_count))，以($i * VALUE)固定的间隔。
回答by Joe Giusti
Yes! You can set the background image size: background-size: 20%, 20%; This will make it repeat 5 times.
是的！可以设置背景图片大小：background-size: 20%, 20%; 这将使其重复 5 次。
