Question

有没有办法设置背景图像用css重复的次数？

Answer 1

一个丑陋的黑客可能会多次插入 - 相同的图像（使用multiple backgrounds）：

E.g。水平重复图像（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;

注意：不使用9版本的IE（source）。

Answer 2

没有

您可以为框设置绝对宽度但是没有css选项可以重复图像n次。

Answer 3

你可以结合一点jQuery和CSS来实现你想要的。

假设您想要水平显示图像foo.png 3次，垂直显示2次。

CSS：

body {
    background: url('foo.png');
}

jQuery的：

$(document).ready(function() {
    $('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px');
});

此外，您可以在$（window）.resize（）中粘贴相同的代码以获得动态响应。

Answer 4

我不确定最初是什么推动了这个问题，但我发现它正在寻找一种方法来确保只显示背景图像的整数副本（即不要裁剪重复集的最终成员）背景图片。）这可以通过background-repeat: space属性来实现。

Answer 5

尽管@gcbenison并未严格重复图像的x次数，但是您可以使用background-repeat: space属性或类似的background-position: round属性，并将其中任何一个与{{1} }，以确保显示一定数量的背景图片重复，然后调整包装器的大小以适应。

background-size和space都将无限重复背景图像，只要可以显示整个图像即可，尽管repeat的其余部分将在图像之间增加一个间隔，而{{ 1}}将缩放图像。简而言之，如果背景图片在垂直方向上适合3.342次，那么space和round都将显示该图片3次，其中space在每个重复的图片之间添加一个间隔，而{{1} }按比例放大图像（或缩小图像，以填补空白）。

因此，如果您想重复一张图片5次，每张图片的宽度为20px，而每张图片之间的间隔为5px，则只需执行以下操作：

round

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

另一个选择（如果无法设置宽度）是使用@franzlorenzon的解决方案，并使用多背景CSS属性声明背景x次数。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

此外，您可以通过创建space循环来保存使用SASS键入多行的代码，如下所示：

round

然后将生成均等间隔的背景图像。此外，您可以随时将.star-rating { width: 120px; background-image: url('example.jpg'); background-repeat: space; background-size: 20px auto; }更改为@for以保持固定间距。

Answer 6

是的！您可以设置背景图像尺寸：background-size：20％，20％;这将使其重复5次。

重复css背景图像一定次数

6 个答案: