web-dev-qa-db-de.com

wiederholen Sie das CSS-Hintergrundbild einige Male

gibt es eine Möglichkeit festzulegen, wie oft ein Hintergrundbild mit CSS wiederholt wird?

cssrepeat
23
Moudy

Ein hässlicher Hack könnte mehrere Male - im Prinzip - dasselbe Bild einfügen (mit mehreren Hintergründen ):

Z.B. So wiederholen Sie ein Bild dreimal horizontal (80 x 80):

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;

Achtung: Funktioniert nicht mit IE unter Version 9 ( source ).

26
franzlorenzon

nein.

sie können eine absolute Breite für eine Box festlegen, aber es gibt keine CSS-Option, um das Bild n-mal zu wiederholen.

8
jantimon

Sie können ein wenig jQuery mit CSS kombinieren, um das zu erreichen, was Sie wollen.

Angenommen, Sie möchten das Bild foo.png dreimal horizontal und zweimal vertikal anzeigen.

CSS:

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

jQuery:

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

Außerdem können Sie denselben Code in $ (window) .resize () einfügen, um eine dynamische Antwort zu erhalten.

2
Ryan Dsouza

Obwohl Sie ein Bild nicht genau x-mal wiederholen, wie @gcbenison feststellte, können Sie die Eigenschaft background-repeat: space oder auf ähnliche Weise den background-position: round verwenden und eine der beiden Eigenschaften mit background-size kombinieren, um sicherzustellen, dass eine festgelegte Anzahl von Wiederholungen für ein Hintergrundbild angezeigt wird. und passen Sie dann möglicherweise die Größe des Wrappers an.

Sowohl space als auch repeat wiederholen ein Hintergrundbild unendlich, solange das gesamte Bild angezeigt werden kann. Für den Rest fügt space eine Lücke zwischen den Bildern hinzu, während round die Bilder skaliert. Einfach ausgedrückt, wenn das Hintergrundbild 3,342-mal vertikal passt, zeigen sowohl space als auch round das Bild dreimal an, wobei space eine Lücke zwischen jedem wiederholten Bild hinzufügt und round die Bilder vergrößert (oder verkleinert, falls erforderlich), um die Lücke zu füllen .

Wenn Sie also ein Bild fünfmal wiederholen möchten, wobei jedes Bild 20 Pixel breit und 5 Pixel voneinander entfernt ist, können Sie dies einfach tun:

.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

Die andere Option (wenn Sie die Breite nicht einstellen können) ist die Lösung von @franzlorenzon zu verwenden und einfach den Hintergrund x-Anzahl, wie oft erklärt Eigenschaft mit der mehrfachen Hintergrund CSS.

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

Darüber hinaus können Sie das Ausgeben mehrerer Zeilen mit SASS sparen, indem Sie eine @for-Schleife wie folgt erstellen:

$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;
}

Dies erzeugt dann die Hintergrundbilder, die alle gleichmäßig verteilt sind. Sie können ($i * (100% / $image_count)) auch in ($i * VALUE) ändern, um einen festen Abstand zu erhalten.

0
Oliver

Ich bin mir nicht sicher, was diese Frage ursprünglich motiviert hat, aber ich habe nach einer Möglichkeit gesucht, um sicherzustellen, dass nur eine ganzzahlige Anzahl von Kopien eines Hintergrundbilds angezeigt wird (dh, das letzte Mitglied eines wiederholten Satzes von Hintergrundbildern nicht beschneiden). Dies kann über die Eigenschaft background-repeat: space erreicht werden.

0
gcbenison