重复css背景图像一定次数

Posted 2023-03-31

【中文标题】重复css背景图像一定次数

【英文标题】：repeat css background image a set number of times

【发布时间】：2011-02-26 08:03:18

【问题描述】：

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

【参考方案1】：

一个丑陋的 hack 可能会多次（静态地）插入同一张图片（使用 multiple backgrounds）：

例如水平重复图像 (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 版本以下 (source) 下无法使用 IE。

【讨论】：

你应该只需要不重复写一次，最简单的版本

【参考方案2】：

没有。

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

【讨论】：

少设置宽度或高度来限制视觉重复量，或者手动重复单张图像中的区域，对，这个。

【参考方案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() 中粘贴相同的代码以获得动态响应。

【讨论】：

或者，您可以简单地将 background-size CSS 值设置为 33.33% 50%。不过我觉得 jQuery 会产生更精确的值。

【参考方案4】：

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

space 和 repeat 都会无限重复背景图像，只要可以显示整个图像，但对于任何剩余部分，space 将在图像之间添加间隙，而round 将缩放图像。简而言之，如果背景图像垂直适合 3.342 倍，那么 space 和 round 将显示图像 3 次，space 在每个重复图像之间添加一个间隙，round 将图像放大（或缩小） ，如有必要）以填补空白。

因此，如果您想重复一张图片 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

另一个选项（如果您无法设置宽度）是使用来自@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) 以获得固定间距。

【参考方案5】：

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

【参考方案6】：

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