Φόντο CSS έναντι χρώματος φόντου

Το CSS παρέχει διαφορετικές ιδιότητες για το στυλ των στοιχείων HTML. Αυτές οι ιδιότητες χρησιμοποιούνται για διαφορετικούς σκοπούς, όπως για την προσθήκη εικόνας και χρώματος φόντου και ρύθμιση του πλάτους και του ύψους των στοιχείων HTML. Αυτές οι ιδιότητες περιλαμβάνουν περιθώριο, χρώμα, πλάτος, ύψος, φόντο, χρώμα φόντου και πολλά άλλα. Πιο συγκεκριμένα, η ιδιότητα φόντου και χρώματος φόντου χρησιμοποιείται για τον ορισμό του φόντου των στοιχείων HTML.

Σε αυτό το εγχειρίδιο, θα μάθουμε λεπτομερώς τη διαφορά μεταξύ των ιδιοτήτων φόντου και χρώματος φόντου.

Ας αρχίσουμε!

Ιδιότητα φόντου CSS

Για να προσαρμόσετε το φόντο οποιουδήποτε στοιχείου HTML, το CSS ' Ιστορικό ” αξιοποιείται το ακίνητο. Είναι μια συντομογραφία οκτώ ακόμη ιδιοτήτων που σημαίνει ότι μπορείτε να τις χρησιμοποιήσετε όλες σε μια γραμμή. Αυτές οι άλλες ιδιότητες είναι:

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

Σύνταξη

Ακολουθεί η σύνταξη της ιδιότητας φόντου:

φόντο: θέση/μέγεθος έγχρωμης εικόνας επαναλαμβανόμενο συνημμένο κλιπ προέλευσης

Ας προχωρήσουμε στην εξήγηση όλων των προαναφερόμενων ιδιοτήτων μία προς μία.

Ιδιότητα χρώματος φόντου CSS

Χρησιμοποιώντας το ' χρώμα του φόντου ιδιότητα, μπορείτε να ορίσετε το χρώμα του φόντου. Το χρώμα θα εμφανιστεί πίσω από τα στοιχεία HTML.

Σύνταξη

Η σύνταξη της ιδιότητας χρώματος φόντου είναι:

χρώμα του φόντου : χρώμα

Στη θέση του « χρώμα ”, μπορείτε να ορίσετε το χρώμα του φόντου που θέλετε να εμφανίζεται πίσω από τα στοιχεία.

Παράδειγμα

Αρχικά, στο αρχείο HTML, θα δημιουργήσουμε ένα κοντέινερ χρησιμοποιώντας την ετικέτα

και στη συνέχεια θα προσθέσουμε μια επικεφαλίδα και μια παράγραφο.

HTML

< div >

< h1 > LinuxHint < / h1 >

< Π > Καλώς ήρθατε στην ιστοσελίδα μας < / Π >

< / div >

Στο CSS, θα προσαρμόσουμε το ύψος του div ως ' 100% ' για να εμφανίζεται σε ολόκληρη τη σελίδα και το μέγεθος γραμματοσειράς του κειμένου ως ' xx-μεγάλο '. Μετά από αυτό, ορίστε το χρώμα φόντου ως ' aqua '.

CSS

div {

ύψος : 100% ;

μέγεθος γραμματοσειράς : xx-μεγάλο ;

χρώμα του φόντου : aqua ;

}

Στην παρακάτω εικόνα, μπορείτε να δείτε ότι εφαρμόζεται το χρώμα φόντου:

Ιδιότητα εικόνας φόντου CSS

Ο ' εικόνα φόντου Η ιδιότητα ' χρησιμοποιείται για να ορίσετε μία ή περισσότερες εικόνες ως φόντο των στοιχείων HTML. Μπορείτε να χρησιμοποιήσετε αυτήν την ιδιότητα για να προσθέσετε διαφορετικές εικόνες φόντου για διαφορετικά στοιχεία.

Σύνταξη

Η σύνταξη της ιδιότητας background-image είναι:

φόντο-εικόνα: url()

Εδώ, δώστε τη διαδρομή της εικόνας που θέλετε να ορίσετε ως φόντο ως όρισμα στο ' url() '.

Παράδειγμα

Σε συνέχεια του προηγούμενου παραδείγματος, προσθέστε μια εικόνα φόντου στο ' div ” τάξη. Θα προσθέσουμε το url της εικόνας ως ' url(img.jpg) ”:

div {

...

εικόνα φόντου : url ( img.jpg ) ;

}

Η παρακάτω παρεχόμενη έξοδος υποδεικνύει ότι η εικόνα φόντου προστέθηκε με επιτυχία:

Σημειώστε ότι η εικόνα επαναλαμβάνεται. Για να λύσετε αυτό το ζήτημα, ελέγξτε την επόμενη ιδιοκτησία.

Ιδιότητα επανάληψης φόντου CSS

Όταν προσθέτετε μια εικόνα ως φόντο σε μια ιστοσελίδα, επαναλαμβάνεται από προεπιλογή. Για να αποφύγετε αυτή την επανάληψη και να ορίσετε το μοτίβο σύμφωνα με την επιλογή σας, το ' φόντο-επανάληψη ” αξιοποιείται το ακίνητο.

Σύνταξη

Η σύνταξη της ιδιότητας background-repeat είναι:

φόντο-επανάληψη : επαναλαμβάνω | επανάληψη-χ | επανάληψη-υ | χωρίς επανάληψη

Η περιγραφή των δηλωμένων τιμών της ιδιότητας background-repeat δίνεται παρακάτω:

επαναλαμβάνω: Χρησιμοποιείται για την επανάληψη της εικόνας και στις δύο κατευθύνσεις, κάθετη και οριζόντια.
επανάληψη-x: Χρησιμοποιείται για τη ρύθμιση της επανάληψης της εικόνας μόνο οριζόντια.
επανάληψη-y: Καθορίζει την κατακόρυφη επανάληψη της εικόνας.
μη επαναλαμβανόμενο: Χρησιμοποιείται για να αποφευχθεί η επανάληψη της εικόνας.

Παράδειγμα

Εδώ, θα ορίσουμε την τιμή της ιδιότητας background-repeat ως ' χωρίς επανάληψη ”:

div {

...

φόντο-επανάληψη : χωρίς επανάληψη ;

}

Το αποτέλεσμα του παραπάνω κωδικού δίνεται παρακάτω. Μπορείτε να δείτε ότι η εικόνα δεν επαναλαμβάνεται πια:

Ιδιότητα θέσης φόντου CSS

Για να ορίσετε τη θέση της εικόνας φόντου, το ' φόντο-θέση 'χρησιμοποιείται η ιδιοκτησία. Σας επιτρέπει να προσαρμόσετε την εικόνα σε διαφορετικές θέσεις, όπως αριστερά επάνω, αριστερό κέντρο, αριστερό κάτω, δεξιά επάνω, δεξί κέντρο και πολλές άλλες.

Σύνταξη

Η σύνταξη της ιδιότητας background-position είναι:

φόντο-θέση : αξία

Στη θέση του « αξία ”, μπορείτε να καθορίσετε τη θέση της εικόνας.

Παράδειγμα

Εδώ, θα ορίσουμε τη θέση φόντου ως ' κέντρο ”:

div {

...

φόντο-θέση : κέντρο ;

}

Στην παρακάτω έξοδο, η εικόνα εμφανίζεται στο κέντρο της σελίδας:

Ιδιότητα μεγέθους φόντου CSS

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

Σύνταξη

Το μέγεθος φόντου έχει την ακόλουθη σύνταξη:

μέγεθος φόντου : μήκος|κάλυμμα

Ακολουθεί η περιγραφή των τιμών της ιδιότητας background-size:

μήκος: Χρησιμοποιείται για τον καθορισμό του πλάτους και του ύψους της εικόνας φόντου.
κάλυμμα: Χρησιμοποιείται για την προσαρμογή της εικόνας φόντου σε ολόκληρο το φόντο.

Παράδειγμα

Θα ορίσουμε το μέγεθος του φόντου ως ' 100% 'ύψος και' 80% πλάτος:

div {

...

μέγεθος φόντου : 100% 80% ;

}

Μπορείτε να δείτε ότι το μέγεθος της εικόνας έχει αλλάξει με βάση τις καθορισμένες διαστάσεις:

Ιδιότητα προέλευσης φόντου CSS

Ο ' φόντο-προέλευση Η ιδιότητα ' χρησιμοποιείται για την προσαρμογή της περιοχής τοποθέτησης της εικόνας φόντου. Η εικόνα ρυθμίζεται στην επάνω αριστερή γωνία ως προεπιλογή.

Σύνταξη

Η σύνταξη της ιδιότητας background-origin είναι:

φόντο-προέλευση : padding-box| περίγραμμα-κουτί | πλαίσιο περιεχομένου

Οι τιμές της ιδιότητας background-origin περιγράφονται παρακάτω:

padding-box: Είναι η προεπιλεγμένη τιμή της ιδιότητας background-origin που χρησιμοποιείται για την προσαρμογή της θέσης της εικόνας φόντου σύμφωνα με την άκρη του padding.
πλαίσιο περιγράμματος: Χρησιμοποιείται για τη ρύθμιση της εικόνας σύμφωνα με το πλαίσιο περιγράμματος της εικόνας.
πλαίσιο περιεχομένου: Χρησιμοποιείται για τη ρύθμιση της εικόνας φόντου σύμφωνα με το περιεχόμενο της εικόνας.

Σημείωση: Η ιδιότητα background-origin δεν λειτουργεί εάν η τιμή της ιδιότητας background-attachment οριστεί ως ' σταθερός '.

Παράδειγμα

Αρχικά, δημιουργήστε ένα περίγραμμα γύρω από το δοχείο. Εδώ, θα συνεχίσουμε το προηγούμενο παράδειγμα και θα ορίσουμε την τιμή πλήρωσης ως ' 10 εικονοστοιχεία '. Μετά από αυτό, προσαρμόστε το πλάτος περιγράμματος ως ' 15 εικονοστοιχεία ', στυλ ως ' κορυφογραμμή ' και χρωματίστε ως ' rgb(1, 68, 68) '. Στο τέλος, θα εκχωρήσουμε την τιμή της ιδιότητας background-origin ως ' πλαίσιο περιεχομένου ”:

div {

...

υλικό παραγεμίσματος : 10 εικονοστοιχεία ;

σύνορο : 15 εικονοστοιχεία κορυφογραμμή rgb ( 1 , 68 , 68 ) ;

φόντο-προέλευση : πλαίσιο περιεχομένου ;

}

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

Ιδιότητα κλιπ φόντου CSS

Ο ' φόντο-κλιπ Η ιδιότητα λειτουργεί στο χρώμα φόντου του στοιχείου. Σας επιτρέπει να ελέγχετε πόσο εκτείνεται ένα χρώμα φόντου πέρα από ένα στοιχείο, όπως η γέμιση του στοιχείου, το περίγραμμά του και το περιεχόμενό του.

Σύνταξη

Η σύνταξη της ιδιότητας κλιπ φόντου είναι:

φόντο-προέλευση : περίγραμμα-κουτί | padding-box | πλαίσιο περιεχομένου

Οι τιμές της ιδιότητας background-origin περιγράφονται παρακάτω:

πλαίσιο περιγράμματος: Είναι η προεπιλεγμένη τιμή της ιδιότητας background-origin που χρησιμοποιείται για τον ορισμό του χρώματος φόντου πίσω από το περίγραμμα.
padding-box: Χρησιμοποιείται για την προσαρμογή του χρώματος μέσα στο πλαίσιο padding του στοιχείου.
πλαίσιο περιεχομένου: Χρησιμοποιείται για να ορίσετε το χρώμα φόντου σύμφωνα με το περιεχόμενο του στοιχείου.

Παράδειγμα

Θα συνεχίσουμε το προηγούμενο παράδειγμα και θα αλλάξουμε την τιμή του στυλ περιγράμματος σε ' διάσπαρτος ” για να κατανοήσετε την ιδιότητα κλιπ φόντου. Μετά από αυτό, θα ορίσουμε την τιμή της ιδιότητας κλιπ φόντου ως ' padding-box ”:

div {

...

φόντο-κλιπ : padding-box ;

}

Η έξοδος σημαίνει ότι το λευκό χρώμα φόντου εμφανίζεται όταν τελείωσε η άκρη του περιγράμματος:

Ιδιότητα συνημμένου φόντου CSS

Ο ' φόντο-συνημμένο Η ιδιότητα ' χρησιμοποιείται για την προσαρμογή της συμπεριφοράς ή της εικόνας κατά την κύλιση της σελίδας. Η συμπεριφορά του μπορεί να ρυθμιστεί με κύλιση με άλλα στοιχεία ή να διορθωθεί.

Σύνταξη

Η σύνταξη της ιδιότητας background-attachment είναι:

φόντο-συνημμένο : αξία

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

Σημείωση: Από προεπιλογή, η τιμή της ιδιότητας επισύναψης φόντου ορίζεται ως ' πάπυρος '.

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

Για να το κάνουμε αυτό, ορίζουμε την τιμή της ιδιότητας background-attachment ως ' σταθερός ”:

div {

...

φόντο-συνημμένο : σταθερός ;

}

Εδώ είναι το αποτέλεσμα που δείχνει ότι η εικόνα έχει διορθωθεί:

Τώρα, κατευθυνθείτε προς τη σύγκριση μεταξύ των ιδιοτήτων φόντου και χρώματος φόντου.