22
Gibt es eine Möglichkeit, wie oft ein Hintergrundbild mit CSS wiederholt wird?wiederholen css Hintergrundbild ein Set mehrmals
A
Antwort
8
nein.
Sie könnten eine absolute Breite für eine Box setzen, aber es gibt keine CSS-Option, um das Bild n mal zu wiederholen.
23
Eine hässliche Hack mehrere Male -statically- gleichen Bild einfügen könnte (mit multiple backgrounds):
Z.B. Um es zu wiederholen ein Bild horizontal (80x80) dreimal:
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;
Vorsicht: nicht funktioniert auf IE unter 9 Version (source).
+3
Sie sollten nur No-Repeat einmal geschrieben, für die einfachste Version – Gibolt
2
Sie können ein wenig jQuery mit CSS kombinieren, um zu erreichen, was Sie wollen.
Angenommen, Sie möchten das Bild foo.png 3 mal horizontal und 2 mal vertikal anzeigen.
CSS:
body {
background: url('foo.png');
}
jQuery:
$(document).ready(function() {
$('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px');
});
Darüber hinaus können Sie den gleichen Code innerhalb von $ (Fenster) .resize() fügen eine dynamische Antwort zu erhalten.
+0
Alternativ können Sie einfach die Hintergrundgröße CSS-Wert als 33,33% 50%. Ich denke, dass jQuery einen genaueren Wert liefert. –
0
Ich bin mir nicht sicher, was ursprünglich diese Frage motiviert hat, aber ich habe nach einem Weg gesucht, um sicherzustellen, dass nur eine ganzzahlige Anzahl von Kopien eines Hintergrundbilds erscheint (z. B. nicht das letzte Mitglied einer Hintergrundbilder.) Dies kann über die background-repeat: space Eigenschaft erreicht werden.
nicht einmal in CSS3 – FelipeAls
Kurz von der Einstellung einer Breite oder Höhe, um die visuelle Größe der Wiederholung zu beschränken, oder manuell den Bereich in einem einzigen Bild zu wiederholen, ja, das. – reisio