Το CSS είναι ένα αρκτικόλεξο για Cascading Style Sheets. Είναι μια απλή αλλά ισχυρή σχεδιαστική γλώσσα που έχει τη δυνατότητα να μετασχηματίζει ιστοσελίδες. Με απλούς όρους, απλοποιεί τη διαδικασία δημιουργίας ιστοσελίδων παρουσίασης και ελκυστικής για τους χρήστες με τη βοήθεια του . Σε αυτό το άρθρο, θα κατανοήσουμε πώς να εφαρμόσουμε διάφορες εικόνες φόντου σε CSS με την ακόλουθη σειρά:
- Εικόνα φόντου στις ιδιότητες CSS
- Εικόνα φόντου σε CSS
- Επανάληψη φόντου
- Συνημμένο ιστορικού
- Θέση ιστορικού
- Εικόνα φόντου σε μέγεθος CSS
- Χρώμα του φόντου
Εικόνα φόντου στις ιδιότητες CSS
Υπάρχουν πολλές ιδιότητες που χρησιμοποιούνται για τον έλεγχο των συμπεριφορών και της τοποθέτησης της εικόνας. Αυτές οι ιδιότητες είναι:
συγχώνευση υλοποίησης τύπου c ++
- εικόνα φόντου
- επανάληψη φόντου
- φόντο-συνημμένο
- φόντο-θέση
- μέγεθος φόντου
- χρώμα του φόντου
Θα εξοικειωθούμε με καθεμία από αυτές τις ιδιότητες και θα δούμε πότε και πώς να τις χρησιμοποιήσουμε με κάποια ενδιαφέρουσα επίδειξη.
Εικόνα φόντου σε CSS
ο εικόνα φόντου ιδιότητα όπως υποδηλώνει το όνομα χρησιμοποιείται απλώς για να υποδείξει και να ορίσει την εικόνα φόντου μέσω ενός στοιχείου σε μια ιστοσελίδα. Μια εικόνα φόντου από προεπιλογή τοποθετείται στην επάνω αριστερή γωνία ενός στοιχείου.
σύνταξη: background-image: url | none | γραμμική-κλίση | ακτινική κλίση
body {background-image: url ('apple.jpg')}}φόντο χρησιμοποιώντας url
Ας κατανοήσουμε τις παραμέτρους:
- url: Η εισαγωγή σε αυτήν την παράμετρο μας επιτρέπει να καθορίσουμε είτε μια διαδρομή αρχείου σε οποιαδήποτε εικόνα είτε τη διεύθυνση URL της εικόνας που πρέπει να οριστεί ως φόντο. Για να δηλώσετε περισσότερες από μία εικόνες, οι διευθύνσεις URL χωρίζονται με ένα διαχωριστικό κόμμα.
body {background-image: url ('apple.jpg')}} 
- κανένας: Αυτή είναι η προεπιλεγμένη τιμή της ιδιότητας και δεν αποδίδεται εικόνα φόντου εάν έχει καθοριστεί η τιμή της.
σώμα {φόντο: κανένα}- γραμμική κλίση (): Η εικόνα φόντου έχει ρυθμιστεί σε γραμμική κλίση. Απαιτούνται τουλάχιστον δύο χρώματα για να προσδιοριστεί για αυτήν την ιδιότητα, δηλαδή από πάνω προς τα κάτω.
body {background-color: # 001 background-image: γραμμική-κλίση (λευκό 15%, διαφανές 16%), γραμμική-κλίση (λευκό 15%, διαφανές 16%) μέγεθος φόντου: 60 εικονοστοιχεία 60 εικονοστοιχεία-θέση φόντου: 0 0, 30 εικονοστοιχεία 30 εικονοστοιχεία}- ακτινική κλίση (): Η εικόνα φόντου έχει ρυθμιστεί σε ακτινική κλίση. Απαιτούνται τουλάχιστον δύο χρώματα για αυτήν την ιδιότητα, δηλαδή για κέντρο προς άκρα.
body {background-color: # 001 background-image: radial-κλίση (λευκό 15%, διαφανές 16%), ακτινική κλίση (λευκό 15%, διαφανές 16%) μέγεθος φόντου: 60 εικονοστοιχεία 60 εικονοστοιχεία-θέση φόντου: 0 0, 30 εικονοστοιχεία 30 εικονοστοιχεία}- επαναλαμβανόμενη-γραμμική-κλίση (): Επαναλαμβάνει μια γραμμική κλίση. Ας χρησιμοποιήσουμε το ίδιο παράδειγμα που είδαμε παραπάνω στη γραμμική κλίση για επαναλαμβανόμενη-γραμμική κλίση και να δούμε τη διαφορά.
body {background-color: # 001 background-image: επανάληψη-γραμμική-κλίση (λευκό 15%, διαφανές 16%), επαναλαμβανόμενη-γραμμική-κλίση (λευκό 15%, διαφανές 16%) μέγεθος φόντου: 60px 60px φόντο-θέση : 0 0, 30 εικονοστοιχεία 30 εικονοστοιχεία}- επαναλαμβανόμενη ακτινική κλίση (): Επαναλαμβάνει μια ακτινική κλίση. Ας εξερευνήσουμε το ίδιο παράδειγμα που χρησιμοποιήσαμε παραπάνω σε μια ακτινική κλίση.
body {background-color: # 001 background-image: επανάληψη-ακτινική-κλίση (λευκό 15%, διαφανές 16%), επαναλαμβανόμενη-ακτινική-κλίση (λευκό 15%, διαφανές 16%)-μέγεθος φόντου: 60px 60px φόντο-θέση : 0 0, 30 εικονοστοιχεία 30 εικονοστοιχεία}Εναλλακτικό υπόβαθρο
Συνιστάται πάντα ως επαγγελματική συμβουλή να προσθέσετε ένα χρώμα φόντου ως εναλλακτική επιλογή. Έρχεται για τη διάσωση ειδικά όταν δεν φορτώνονται οι εικόνες φόντου ή το φόντο ντεγκραντέ που ορίζουμε κατά την ανάπτυξη δεν υποστηρίζεται από ορισμένα από τα παλιά προγράμματα περιήγησης στα οποία προβάλλεται.
Αυτό δεν καταστρέφει την εμπειρία χρήστη και μπορεί να δηλωθεί ως εξής:
body {background: url (apple_lost.jpg) ροζ}Πολλαπλό φόντο
Έχουμε επίσης την επιλογή να ορίσουμε πολλές εικόνες φόντου και απαιτείται στις περισσότερες περιπτώσεις, όπως εικόνα προσκηνίου και φόντου. Η σειρά της εικόνας είναι σημαντική εδώ, η εικόνα που πρέπει να βρίσκεται στο μπροστινό μέρος δηλώνεται πρώτα και η εικόνα που πρέπει να βρίσκεται στο πίσω μέρος δηλώνεται στη συνέχεια.
Ακολουθεί το παράδειγμα για πολλές εικόνες φόντου:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}}Επανάληψη φόντου
Η ιδιότητα επανάληψης φόντου χρησιμοποιείται μαζί με την εικόνα φόντου για τον καθορισμό της συμπεριφοράς επανάληψης μιας εικόνας. Καθορίζει εάν και πώς θα επαναληφθεί μια εικόνα φόντου. Από προεπιλογή, η εικόνα φόντου επαναλαμβάνεται κάθετα και οριζόντια.
Οι πιθανές τιμές είναι:
- επανάληψη- Η εικόνα επαναλαμβάνεται τόσο οριζόντια όσο και κάθετα
- no-repeat - Η εικόνα δεν επαναλαμβάνεται
- repeat-x - Η εικόνα επαναλαμβάνεται οριζόντια
- repeat-y - Η εικόνα επαναλαμβάνεται κάθετα
- space- Η εικόνα επαναλαμβάνεται με ομοιόμορφα κενά ή κενά μεταξύ τους.
- γύρο - Η εικόνα επαναλαμβάνεται για να γεμίσει την περιοχή χωρίς κενά μεταξύ τους.
Η σύνταξη CSS για την ιδιότητα επανάληψης φόντου είναι:
επανάληψη φόντου: επανάληψη | επανάληψη-x | επανάληψη-y | χωρίς επανάληψη | κενό | στρογγυλό
body {background-image: url ('heart.png'), url ('background.png') φόντο-επανάληψη: επανάληψη-y, επανάληψη-x φόντο-χρώμα: #ffffff}Συνημμένο ιστορικού
ο φόντο-συνημμένο Η ιδιότητα χρησιμοποιείται μαζί με την εικόνα φόντου για να δηλώσετε εάν η εικόνα θα πρέπει να μετακινηθεί κατά την κύλιση του περιεχομένου. Αυτό σημαίνει ότι η εικόνα φόντου πρέπει να είναι σταθερή ή πρέπει να μετακινηθεί μαζί με το έγγραφο σε σχέση με την προβολή παραθύρου του προγράμματος περιήγησης. Η προεπιλεγμένη τιμή είναι η κύλιση.
Οι πιθανές τιμές είναι:
- κύλιση - Η εικόνα μετακινείται μαζί με τη σελίδα.
- σταθερή - Η εικόνα δεν θα μετακινηθεί μαζί με τη σελίδα
Η σύνταξη CSS για το συνημμένο στο παρασκήνιο είναι:
φόντο-συνημμένο: κύλιση | σταθερό
body {background-image: url ('heart.png'), url ('background.png') φόντο-επανάληψη: space, round}java cast double σε int
Θέση ιστορικού
ο φόντο-θέση Η ιδιότητα χρησιμοποιείται για να δηλώσει τη θέση ή τη θέση μιας εικόνας φόντου. Οι πιθανές τιμές είναι:
- μπλουζα
- σωστά
- κάτω μέρος
- αριστερά
- κέντρο
- συνδυασμός αυτών των τιμών (π.χ. αριστερή κορυφή)
Η σύνταξη CSS για τη θέση παρασκηνίου είναι:
φόντο-θέση: πάνω | δεξιά | αριστερά | κάτω | κέντρο
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: κύλιση}Εικόνα φόντου σε μέγεθος CSS
Αυτή η ιδιότητα είναι μια από τις πιο χρήσιμες καθώς μας επιτρέπει να ελέγξουμε το μέγεθος της εικόνας φόντου. Υπάρχουν διαφορετικοί συνδυασμοί που μπορούμε να χρησιμοποιήσουμε με αυτήν την ιδιότητα και να πάρουμε τα αποτελέσματα ανάλογα. Η προεπιλεγμένη τιμή είναι αυτόματη.
Οι ακόλουθες τιμές μπορούν να χρησιμοποιηθούν με μέγεθος φόντου:
- αυτο
- μήκος-ύψος και πλάτος εικόνας π.χ. 20 εικονοστοιχεία 40 εικονοστοιχεία.
- ένα ποσοστό-ύψος και πλάτος της εικόνας ως ποσοστό γονικού στοιχείου w.r.t π.χ. 50% 50%.
- κέντρο- Ευθυγραμμίστε την εικόνα στο κέντρο
- κάλυμμα, κλιμάκωση της εικόνας για πλήρη κάλυψη από την περιοχή φόντου.
- περιέχει, κλιμάκωση της εικόνας ώστε να χωράει μέχρι το πραγματικό ύψος και πλάτος της.
Η σύνταξη CSS για τη θέση παρασκηνίου είναι:
μέγεθος φόντου: αξία
body {background-image: url ('heart.png'), url ('background.png') φόντο-επανάληψη: χωρίς επανάληψη, επανάληψη μεγέθους φόντου: 400 εικονοστοιχεία 150 εικονοστοιχεία, εξώφυλλο}body {background-image: url ('heart.png'), url ('background.png') φόντο-επανάληψη: χωρίς επανάληψη, επανάληψη μεγέθους φόντου: περιέχει, 400 εικονοστοιχεία 150 εικονοστοιχεία}Χρώμα του φόντου
Αυτό ισχύει το απλούστερο όλων των ιδιοτήτων στο CSS. Εφαρμόζει συμπαγή χρώματα στο φόντο της σελίδας. Η τιμή για αυτήν την ιδιότητα μπορεί να καθοριστεί σε χρώματα (π.χ. κόκκινο, μπλε κ.λπ.), δεκαεξαδική τιμή και τιμή RGB.
Η σύνταξη CSS για το χρώμα φόντου είναι:
χρώμα του φόντου: αξία
body {background-image: url (small-heart.jpg) χρώμα φόντου: # 22a8e3}Αυτό καταλήγει σε όλες τις ιδιότητες που μπορούμε να χρησιμοποιήσουμε με το φόντο. Μπορούμε πάντα να δοκιμάζουμε διαφορετικούς συνδυασμούς των ιδιοτήτων όπως είδαμε στην επίδειξή μας.
βασικές δομές δεδομένων στην Java
Το CSS είναι απαραίτητο και πρέπει να αποκτήσει δεξιότητες για κάθε προγραμματιστή web front-end. Βοηθά κατά το σχεδιασμό και το στυλ του φόντου και τη δημιουργία εντυπωσιακών ιστότοπων και εμπλουτίζει την εμπειρία των χρηστών. Το καλύτερο είναι να συνεχίσετε τον πειραματισμό και να εκμεταλλευτείτε πλήρως αυτήν την ειδική τεχνολογία front-end, καθώς μπορεί να κάνει θαύματα και να μεταμορφώσει δυναμικά τη σελίδα.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του ιστολογίου 'Εικόνα φόντου στο CSS' και θα επικοινωνήσουμε μαζί σας.