Επανάληψη ιστορικού - CSS-Κόλπα

Anonim

Εάν background-imageέχει καθοριστεί μια ιδιότητα, η background-repeatιδιότητα στο CSS καθορίζει εάν (και πώς) θα επαναληφθεί. Ακολουθεί ένα παράδειγμα:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Αυτές είναι οι πιθανές τιμές για αυτήν την ιδιότητα (εκτός από τα συνηθισμένα στοιχεία όπως inherit):

  • repeat: πλακάρετε την εικόνα και στις δύο κατευθύνσεις. Αυτή είναι η προεπιλεγμένη τιμή.
  • repeat-x: πλακάρετε την εικόνα οριζόντια
  • repeat-y: πλακάρετε την εικόνα κάθετα
  • no-repeat: μην πλακάρετε, απλώς δείξτε την εικόνα μία φορά
  • space: πλακάρετε την εικόνα και στις δύο κατευθύνσεις. Ποτέ μην περικόπτετε την εικόνα, εκτός εάν μια εικόνα είναι πολύ μεγάλη για να χωρέσει. Εάν μπορούν να χωρέσουν πολλές εικόνες, χωρίστε τις με ευκολία στις εικόνες που αγγίζουν πάντα τις άκρες.
  • round: πλακάρετε την εικόνα και στις δύο κατευθύνσεις. Ποτέ μην περικόπτετε την εικόνα, εκτός εάν μια εικόνα είναι πολύ μεγάλη για να χωρέσει. Εάν πολλές εικόνες μπορούν να χωρέσουν με εναπομένον χώρο, σκουπίστε τις ή τεντώστε τις για να γεμίσετε το χώρο. Εάν έχει απομείνει μικρότερο από μισό πλάτος εικόνας, τεντώστε, εάν είναι περισσότερο, τεντώστε.

Υπάρχει επίσης η σύνταξη δύο τιμών:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Αυτό καθιστά τη σύνταξη μίας αξίας συντομογραφία για τη σύνταξη δύο τιμών. Για παράδειγμα, roundείναι πραγματικά round round.

Μπορείτε επίσης να διαχωρίσετε με κόμμα πολλαπλές τιμές εάν αντιμετωπίζετε πολλά φόντα.

Διαδήλωση

Δείτε το
φόντο-επανάληψη της πένας από CSS-Tricks (@ css-tricks)
στο CodePen.

Διαδραστική επίδειξη για τον τρόπο spaceκαι τη roundλειτουργία, σε σύγκριση με repeat:

Δείτε το Pen
The Different "Background-Repeat" του Chris Coyier (@chriscoyier)
στο CodePen.

Μια άλλη επίδειξη αλλαγής μεγέθους, που δείχνει ένα «ψεύτικο» περίγραμμα:

Δείτε το Pen
Fitted Border Image the Easy Way by ShopTalk Show (@shoptalkshow)
στο CodePen.

Εδώ είναι ένα άλλο διασκεδαστικό demo με επίδειξη χάμπουργκερ background-repeat: round;.

Σχετιζομαι με

  • φόντο-συνημμένο
  • φόντο-κλιπ
  • χρώμα του φόντου
  • εικόνα φόντου
  • φόντο-προέλευση
  • φόντο-θέση
  • μέγεθος φόντου

Πόροι

  • Προδιαγραφές CSS3
  • MDN

Υποστήριξη προγράμματος περιήγησης

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Η σύνταξη πολλαπλών τιμών διαχωρισμένων με κόμματα υποστηρίζεται μόνο στους Firefox 3.6+ και IE 9+. Η σύνταξη δύο τιμών για τον έλεγχο των οριζόντιων και κατακόρυφων τιμών που διαχωρίζονται υποστηρίζεται μόνο στους Firefox 13+ και IE 9+. Η roundκαι spaceλέξεις-κλειδιά είναι μόνο Firefox 49+ και IE 9+.