28

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

4

6 回答 6

34

一个丑陋的 hack 可能会多次（静态地）插入相同的图像（使用多个背景）：

例如，水平重复图像 (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 上工作。

于 2013-10-15T08:30:32.033 回答
8

不。

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

于 2010-06-01T12:13:14.017 回答
2

正如@gcbenison 所说，虽然没有严格重复图像 x 次，但您可以使用该background-repeat: space属性，或者类似地，background-position: round将这些属性中的任何一个与background-size以确保显示背景图像的一组重复次数，然后也许调整包装器的大小以适应。

只要可以显示整个图像，两者都会无限重复背景图像，尽管对于任何剩余部分space都会在图像之间添加间隙，同时会缩放图像。简而言之，如果背景图像垂直适合 3.342 倍，则两者都将显示图像 3 次，并在每个重复图像之间添加间隙，并放大（或缩小，如果需要）图像以填充间隙。repeatspaceroundspaceroundspaceround

如果你想重复一张图片 5 次，每张图片宽 20px，间隔 5px，你可以简单地这样做：

.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

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

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

此外，您可以通过创建@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;
}

然后这将生成背景图像，所有这些图像都均匀分布。此外，您可以随意更改($i * (100% / $image_count))为($i * VALUE)固定间距。

于 2018-10-09T10:06:27.417 回答
2

你可以结合一点 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() 中粘贴相同的代码以获得动态响应。

于 2016-09-18T03:38:37.737 回答
1

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

于 2018-01-07T18:21:36.860 回答
1

是的！可以设置背景图片大小： background-size: 20%, 20%; 这将使它重复5次。

于 2020-04-18T16:54:55.790 回答