Το κύριο πράγμα είναι να καθορίσετε την εικόνα στον υπολογιστή ή το τηλέφωνό σας και, στη συνέχεια, κάντε κλικ στο OK στο κάτω μέρος αυτής της σελίδας. Από προεπιλογή, το απλό φόντο της εικόνας αντικαθίσταται από ένα διαφανές. Το χρώμα φόντου της αρχικής εικόνας καθορίζεται αυτόματα· απλώς πρέπει να καθορίσετε στις ρυθμίσεις με ποιο χρώμα θα την αντικαταστήσετε. Η κύρια παράμετρος που επηρεάζει την ποιότητα της αντικατάστασης είναι η «Ένταση αντικατάστασης» και μπορεί να είναι διαφορετική για κάθε εικόνα.
Ένα παράδειγμα φωτογραφίας ενός ροζ τριαντάφυλλου χωρίς αλλαγές και μετά την αντικατάσταση του απλού φόντου με διαφανές, λευκό και πράσινο:
Πρώτο παράδειγμαμε ένα τριαντάφυλλο σε διαφανές φόντο με τις ακόλουθες ρυθμίσεις:
1) Ένταση αντικατάστασης - 38;
2) Εξομάλυνση κατά μήκος των άκρων - 5.
3) Αντικαταστήστε το απλό φόντο με ένα διαφανές.
4) Κόψιμο (<0) или Добавление (>0) στις άκρες - "-70"?
5) Invert - απενεργοποιημένο (δεν έχει επιλεγεί).
Για τη δημιουργία δεύτερο παράδειγμα, με λευκό φόντο, χρησιμοποιήθηκαν οι ίδιες ρυθμίσεις όπως στο πρώτο παράδειγμα, εκτός από την παράμετρο: "Αντικατάσταση απλού φόντου με" - λευκό. ΣΕ τρίτο παράδειγμα, με πράσινο φόντο, οι ρυθμίσεις χρησιμοποιούνται επίσης όπως στο πρώτο παράδειγμα, εκτός από την παράμετρο: "color in hex format" - #245a2d.
Η αρχική εικόνα δεν αλλάζει με κανέναν τρόπο. Θα σας δοθεί μια άλλη επεξεργασμένη εικόνα με διαφανές ή καθορισμένο φόντο.
Σε ορισμένες περιπτώσεις, για παράδειγμα, όταν σχεδιάζετε έναν ιστότοπο, μπορεί να αντιμετωπίσετε μια κατάσταση όπου το φόντο της εικόνας σε καμία περίπτωση δεν ταιριάζει με το χρώμα του ίδιου του ιστότοπου. Η προφανής λύση είναι να γίνει αυτό το φόντο διαφανές.
Θα χρειαστείτε
Οδηγίες
Πώς να ορίσετε διαφανές χρώμα στο css; Προς το παρόν υπάρχουν 3 τρόποι για να γίνει αυτό.
Μέθοδος 1 - διαφανής τιμή
Εάν ορίσετε την τιμή του χρώματος κειμένου ή φόντου σε διαφανές , το χρώμα θα είναι εντελώς διαφανές, δηλαδή αόρατο. Παράδειγμα:
Χρώμα: διαφανές;
Ένα τέτοιο κείμενο δεν θα είναι ορατό στη σελίδα.
Μέθοδος 2 - λειτουργία χρώματος rgba
Και αυτή είναι μια καινοτομία css3. Προηγουμένως, δεν υπήρχε τέτοια λειτουργία στην ανάπτυξη ιστού, υπήρχε μόνο rgb. Σίγουρα γνωρίζετε πώς να εγγράφετε χρώμα σε αυτή τη μορφή. Για να το κάνετε αυτό, πρέπει να καθορίσετε τρεις τιμές σε αγκύλες από το 0 έως το 255, υποδεικνύοντας τον κορεσμό ενός από τα τρία βασικά χρώματα (κόκκινο, πράσινο, μπλε). Για παράδειγμα:
Υπόβαθρο: rgb(230, 121, 156);
Η μορφή rgba δεν διαφέρει, απλώς προσθέτει μια τέταρτη τιμή - τον βαθμό διαφάνειας του στοιχείου από 0 έως 1. Γενικά, αυτή η μορφή εγγραφής χρησιμοποιείται κυρίως για να ορίσετε ένα ημιδιαφανές χρώμα, αντί για εντελώς διαφανές. Για να επιτύχετε πλήρη διαφάνεια, πρέπει απλώς να γράψετε το 0 ως την τέταρτη τιμή.
Φόντο: rgba(0, 0, 0, 0);
Σε αυτήν την περίπτωση, τα υπόλοιπα 3 ψηφία δεν παίζουν ιδιαίτερο ρόλο.
Ένα ημιδιαφανές χρώμα μπορεί να οριστεί εάν η τέταρτη παράμετρος οριστεί σε μια τιμή από 0,01 έως 0,99. Έχω ήδη γράψει λίγα λόγια για τη ρύθμιση της ημιδιαφάνειας για το φόντο στο , μπορείτε να το διαβάσετε αν ενδιαφέρεστε.
Μέθοδος 3 - αδιαφάνεια
Μια άλλη ιδιότητα από την τεχνολογία css3. Αλλά θέλω να σας προειδοποιήσω αμέσως ότι λειτουργεί λίγο διαφορετικά. Με την αδιαφάνεια, η διαφάνεια ορίζεται σε ολόκληρο το μπλοκ στο οποίο εφαρμόζεται. Έτσι, η αναγνωσιμότητα του κειμένου και η αντίληψη των εικόνων χειροτερεύουν. Επομένως, βλέπω το νόημα της χρήσης αυτής της ιδιότητας μόνο για μπλοκ που δεν περιέχουν κείμενο ή άλλες πληροφορίες. Οι τιμές μπορούν να οριστούν από το 0 έως το 1, όπως συμβαίνει με την τέταρτη παράμετρο κατά τον καθορισμό ενός χρώματος στη μορφή rgba.
Γενικά, στις αυτή τη στιγμήΑυτοί είναι όλοι οι τρόποι που γνωρίζω για να ορίσω ένα διαφανές χρώμα στο css. Γιατί χρειάζεται αυτό είναι ένα άλλο ερώτημα. Διά μέσου διάφανο φόντοαυτό που είναι από κάτω φαίνεται. Μερικές φορές χρειάζεται να γίνει με αυτόν τον τρόπο από το σχεδιασμό. Γενικά, η τεχνική της ημιδιαφάνειας είναι πολύ διαδεδομένη σήμερα.
Διάφανο φόντο
Όπως ίσως γνωρίζετε, το φόντο είναι μια ιδιότητα CSS που σας επιτρέπει να ορίσετε ένα χρώμα φόντου ή να φορτώσετε μια εικόνα ώστε να λειτουργεί ως φόντο.
Ορίστε τη διαφάνεια για το φόντο css
Έτσι, όλα αυτά γίνονται πολύ απλά χάρη σε μια έγχρωμη μορφή εγγραφής όπως το rgba. Εάν εργάζεστε με συντάκτες γραφικών, τότε μάλλον γνωρίζετε ότι η λειτουργία χρώματος rgb σημαίνει αυτό: η αναλογία του κόκκινου (κόκκινο), η αναλογία του πράσινου (πράσινο) και του μπλε (μπλε). Έτσι, το rgba είναι πρακτικά το ίδιο, προστίθεται μόνο μια ακόμη παράμετρος - η διαφάνεια. Είναι γραμμένο έτσι:
Χρώμα φόντου: rgba(173, 57, 22, 0,5)
Πρώτα δηλώνουμε ρητά ότι ρυθμίζουμε το χρώμα σε λειτουργία rgba. Στη συνέχεια υποδεικνύουμε τις τιμές κορεσμού των τριών βασικών χρωμάτων από το 0 έως το 255, όπου το 255 είναι ο υψηλότερος κορεσμός. Η τέταρτη παράμετρος είναι η διαφάνειά μας. Εδώ γράφεται η τιμή από 0 έως ένα. Το 1 είναι ένα εντελώς αδιαφανές στοιχείο και το 0 είναι ένα εντελώς διαφανές στοιχείο. Αντίστοιχα, αν το ορίσετε στο 0, τότε το χρώμα του φόντου δεν θα είναι καθόλου ορατό.
Τώρα ξέρετε πώς να ορίσετε την ιδιότητα φόντου σε διαφάνεια στο CSS. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε τη λειτουργία χρώματος rgba. Υπάρχει επίσης μια ιδιότητα αδιαφάνειας, αλλά ισχύει για ολόκληρο το στοιχείο ως σύνολο. Δηλαδή, όταν εφαρμόζεται αδιαφάνεια, μπορεί να εφαρμοστεί διαφάνεια στο κείμενο, καθιστώντας το δυσανάγνωστο.
Παράδειγμα διαφανούς φόντου
Πλεονεκτήματα ημιδιαφανές φόντοεύκολο να φανεί με ένα παράδειγμα. Για παράδειγμα, έχουμε ένα γενικό φόντο σελίδας. Έτσι θα έμοιαζε το μπλοκ αν του έδιναν ένα συμπαγές μαύρο χρώμα:
Τώρα ας ορίσουμε το ίδιο μαύρο χρώμα στο μπλοκ, αλλά προσδιορίστε το χρησιμοποιώντας τη μορφή χρώματος rgba, προσδιορίζοντας την τελευταία τιμή ως 0,7, για παράδειγμα. Θα βγει ως εξής: 
Τώρα το φόντο του μπλοκ είναι ορατό μέσα από αυτό και η εικόνα φόντου είναι ορατή μέσα από αυτό. Αυτή η εικόνα και το φόντο είναι μόνο για παράδειγμα. Όπως μπορείτε να φανταστείτε, η διαφάνεια στο φόντο css μπορεί να σας φανεί χρήσιμη όταν θέλετε να εμφανίζεται το φόντο ενός ένθετου στοιχείου χωρίς να κρύβονται άλλα φόντα που βρίσκονται σε άλλα επίπεδα.
Η ρύθμιση του ίδιου του χρώματος χρησιμοποιώντας το rgba δεν είναι δύσκολη. Όπως ήδη αναφέρθηκε, τα τρία πρώτα γράμματα σημαίνουν τα τρία βασικά χρώματα: κόκκινο, πράσινο και μπλε, ή μάλλον το μερίδιό τους (από 0 έως 255). Ορίζοντας διαφορετικές τιμές, μπορείτε να πάρετε εκατομμύρια διαφορετικά χρώματα και η διαφάνεια θα σας επιτρέψει να βρείτε έναν τόνο παραπάνω όμορφα εφέγια τον ιστότοπο, εάν είναι απαραίτητο.
Φόρτωση...