Διαβάθμιση Χρώματος CSS

Διαφάνεια φόντου

Η διαφάνεια CSS σας επιτρέπει να εμφανίσετε ομαλή μετάβαση μεταξύ δύο ή περισσότερων καθορισμένων χρωμάτων.

Το CSS ορίζει δύο τύπους διαφάνειας:

  • Γραμμική διαφάνεια（κάτω/πάνω/αριστερά/δεξιά/διαγώνια)
  • Κυκλική διαφάνεια（από το κέντρο του)

Γραμμική διαφάνεια CSS

Για να δημιουργήσετε μια γραμμική διαφάνεια, πρέπει να ορίσετε τουλάχιστον δύο σημεία χρώματος. Τα σημεία χρώματος είναι τα χρώματα που θέλετε να παρουσιάσετε με ομαλή μετάβαση. Μπορείτε επίσης να ρυθμίσετε το σημείο εκκίνησης και την κατεύθυνση (ή το γωνιακό μέγεθος) και την επίδραση της διαφάνειας.

σύνταξη

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Γραμμική διαφάνεια - από πάνω προς τα κάτω (προεπιλεγμένο)

Το παράδειγμα που ακολουθεί δείχνει μια γραμμική διαφάνεια που ξεκινά από την κορυφή. Αρχίζει από το κόκκινο και过渡到黄色：

Από πάνω προς κάτω (προεπιλεγμένο)

Παράδειγμα

#grad {
  background-image: linear-gradient(red, yellow);
}

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

Γραμμική διαφάνεια - Από αριστερά προς τα δεξιά

Το παρακάτω παράδειγμα δείχνει μια γραμμική διαφάνεια που ξεκινά από το αριστερά. Αρχίζει από το κόκκινο και过渡到黄色：

Από αριστερά προς τα δεξιά

Παράδειγμα

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

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

Γραμμική διαφάνεια - Διαγώνια

Μπορείτε να καθορίσετε τις οριζόντιες και κάθετες θέσεις για να δημιουργήσετε μια διαγώνια διαφάνεια.

Το παρακάτω παράδειγμα δείχνει μια γραμμική διαφάνεια που ξεκινά από το πάνω αριστερό σημείο (μέχρι το κάτω δεξί σημείο). Αρχίζει από το κόκκινο και过渡到黄色：

Από το πάνω αριστερό προς το κάτω δεξί

Παράδειγμα

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

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

Χρήση γωνίας

Αν θέλετε να έχετε περισσότερο έλεγχο στη γωνία της διαφάνειας, μπορείτε να καθορίσετε μια γωνία για να αντικαταστήσετε τις προκαθορισμένες κατευθύνσεις (κάτω, πάνω, δεξιά, αριστερά, δεξιά κάτω κ.λπ.). Η τιμή 0deg ισούται με πάνω (to top). Η τιμή 90deg ισούται με δεξιά (to right). Η τιμή 180deg ισούται με κάτω (to bottom).

180deg

σύνταξη

background-image: linear-gradient(angle, color-stop1, color-stop2);

Αυτή η γωνία καθορίζει το γωνιαίο σημείο μεταξύ της οριζόντιας γραμμής και της γραμμής διαφάνειας.

Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσουμε γωνία στη γραμμική διαφάνεια:

Παράδειγμα

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

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

Χρήση πολλαπλών σημείων χρώματος

Το παρακάτω παράδειγμα δείχνει μια γραμμική διαφάνεια με πολλαπλές σημεία χρώματος (από πάνω προς τα κάτω):

Παράδειγμα

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

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

Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσουμε τα χρώματα του ραβδοποιημένου χρωματογράμματος και του κειμένου για να δημιουργήσουμε μια γραμμική διαφάνεια (από αριστερά προς τα δεξιά):

Διαφάνεια φόντου

Παράδειγμα

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

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

Χρήση διαφάνειας

Η CSS διαφάνεια υποστηρίζεται επίσης από τις διαφάνειες, και μπορεί να χρησιμοποιηθεί για τη δημιουργία εφέ διαφάνειας.

Για να προσθέσουμε διαφάνεια, χρησιμοποιούμε τη συνάρτηση rgba(). Ο τελευταίος παράμετρος της συνάρτησης rgba() μπορεί να είναι τιμή από 0 έως 1 και καθορίζει τη διαφάνεια του χρώματος: 0 σημαίνει πλήρως διαφανές, 1 σημαίνει πλήρως χρωματιστό (χωρίς διαφάνεια).

Το παρακάτω παράδειγμα δείχνει μια γραμμική διαβάθμιση που ξεκινάει από τα αριστερά. Αρχίζει πλήρως διαφανής και μετά过渡到全色红色：

Παράδειγμα

#grad {
  background-image: γραμμική διαβάθμιση(αριστερά, rgba(255,0,0,0), rgba(255,0,0,1));
}

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

Επαναλαμβανόμενη γραμμική διαβάθμιση

repeating-linear-gradient() Συνάρτηση επαναλαμβανόμενης γραμμικής διαβάθμισης:

Παράδειγμα

Επαναλαμβανόμενη γραμμική διαβάθμιση:

#grad {
  background-image: επαναλαμβανόμενη γραμμική διαβάθμιση(red, yellow 10%, green 20%);
}

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