Η συνάρτηση repeating-linear-gradient() του CSS

Ορισμός και χρήση

CSS repeating-linear-gradient() η συνάρτηση χρησιμοποιείται για την αναπαραγωγή γραμμικής διαφάνειας.

παράδειγμα:

γραμμική διαφάνεια αναπαραγωγική γραμμική διαφάνεια
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

παράδειγμα

Παράδειγμα 1

Μια επαναλαμβανόμενη διανυσματική διαφάνεια:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Διαφορετικές επαναλαμβανόμενες διανυσματικές διαφάνειες:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Δοκιμάστε το προσωπικά

Γλωσσή CSS

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
Τιμή Περιγραφή
angle Ορίζει το γωνιακό μέγεθος της διανυσματικής διαφάνειας. Από 0deg έως 360deg. Η προεπιλεγμένη τιμή είναι 180deg.
side-or-corner

Ορίζει τη θέση του σημείου εκκίνησης της διανυσματικής διαφάνειας.

Αυτό αποτελείται από δύο κλειδιά: το πρώτο δείχνει την οριζόντια κατεύθυνση (αριστερά ή δεξιά), το δεύτερο τη κάθετη κατεύθυνση (top ή bottom).

Η σειρά δεν είναι σημαντική και κάθε κλειδί είναι επιλογικό.
color-stop1, color-stop2,...

Τα σημεία终点的颜色 είναι τα χρώματα που θέλετε να εμφανίζονται με ομαλή μετάβαση.

Αυτό το όρισμα αποτελείται από τιμές χρώματος και ένα ή δύο επιλογικά σημεία终点的颜色 (百分比 από 0% έως 100% ή μήκος κατά μήκος της διανυσματικής διαφάνειας).

Τεχνικά λεπτομέρειες

Έκδοση: CSS Images Module Level 3

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

Τα αριθμήματα στη διάταξη αντιπροσωπεύουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη λειτουργία.

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
Δύο σημεία终点的颜色
71 79 64 12.1 58

Σχετικές σελίδες

Εκμάθηση:CSS διανυσματική διαφάνεια

Αναφορά:Προσαρμοσμένο Εικόνα Περιβάλλοντος CSS

Αναφορά:CSS conic-gradient() λειτουργία

Αναφορά:CSS linear-gradient() λειτουργία

Αναφορά:CSS radial-gradient() λειτουργία

Αναφορά:CSS repeating-conic-gradient() συναρτηση

Αναφορά:CSS repeating-radial-gradient() συναρτηση