повторить css фоновое изображение установленное количество раз - PullRequest
Новая
       3

повторить css фоновое изображение установленное количество раз

23 голосов
/ 01 июня 2010

есть ли способ установить количество повторений фонового изображения с помощью css?

Ответы [ 5 ]

27 голосов
/ 15 октября 2013

Гадкий хак может вставлять несколько раз - статически - одно и то же изображение (используя несколько фонов ):

например. Повторить по горизонтали изображение (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;

Осторожно: не работает в IE до версии 9 ( source ).

8 голосов
/ 01 июня 2010

нет.

вы можете установить абсолютную ширину для коробки но нет возможности css повторить изображение n раз.

2 голосов
/ 18 сентября 2016

Вы можете объединить немного 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 () для получения динамического ответа.

0 голосов
/ 09 октября 2018

Несмотря на то, что число x строго не повторяется, как указано в @gcbenison, вы можете использовать свойство 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 и просто объявить фон x несколько раз, используя CSS-свойство множественного фона.

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

Кроме того, вы можете сохранить ввод нескольких строк, используя SASS, создав цикл @for, например, так: 

$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) для фиксированного интервала.

0 голосов
/ 07 января 2018

Я не уверен, что изначально мотивировало этот вопрос, но я нашел, что искал способ убедиться, что появляется только целое число копий фонового изображения (т.е. не обрезать последний элемент повторного набора фона изображения.) Это может быть достигнуто с помощью свойства background-repeat: space.

...