Χρησιμοποιώντας το CSS για να ορίσετε μια εικόνα φόντου

• Ενδέχεται 18, 2024

Αναρωτηθήκατε ποτέ πώς διαχειρίζονται οι ιστοσελίδες αυτά τα όμορφα σχέδια και τις εικόνες που επιπλέουν πίσω από το κείμενο; Όλα γίνονται μέσω της μαγείας των Φύλλων Στυλ Cascading. Το CSS όχι μόνο σας επιτρέπει να ορίσετε μια εικόνα για το φόντο της σελίδας σας, αλλά επίσης σας επιτρέπει να τροποποιήσετε τον τρόπο με τον οποίο εμφανίζεται η εικόνα - για να μπορείτε να έχετε μόνο την εμφάνιση που θέλετε.

Το θεμελιώδες δομικό στοιχείο για την εικόνα φόντου σας είναι, επαρκώς κατάλληλη, η ιδιότητα «φόντο-εικόνα». Χρησιμοποιείτε αυτήν την ιδιότητα για να ενημερώσετε τον ιστότοπό σας όπου βρίσκεται το αρχείο εικόνας, ως εξής:

σώμα {
εικόνα-φόντου: url ("image.gif");
}

Αυτό είναι το μόνο που χρειάζεται να κάνετε για να τοποθετήσετε μια εικόνα φόντου για την ιστοσελίδα σας. Φυσικά, πιθανότατα θα θέλετε να προσαρμόσετε τον τρόπο εμφάνισης της εικόνας. Ας υποθέσουμε ότι θέλετε να ξεκινήσει η εικόνα σας στο επάνω μέρος της σελίδας αλλά να είναι κεντραρισμένη οριζόντια αντί για αριστερά ευθυγραμμισμένη (η προεπιλεγμένη ευθυγράμμιση). Σε αυτή την περίπτωση, θα θέλετε να προσθέσετε την ιδιότητα 'background-position' στον κανόνα CSS:

σώμα {
εικόνα-φόντου: url ("image.gif");
φόντο-θέση: κεντρική κορυφή;
}

Όταν ορίζουμε την ιδιότητα 'φόντο-θέση', η πρώτη τιμή ορίζει την οριζόντια ευθυγράμμιση (αριστερά, κεντρα ή δεξιά) και η δεύτερη ορίζει την κατακόρυφη ευθυγράμμιση της εικόνας (πάνω, στο κέντρο ή στο κάτω μέρος).

Στη συνέχεια, αποφασίζετε ότι θέλετε να σταματήσετε την εικόνα από πλακάκια (επανάληψη) οριζόντια, αν και θέλετε να πλακάται κάθετα. Ήρθε η ώρα να αναδείξουμε την ιδιότητα 'background-repeat':

σώμα {
εικόνα-φόντου: url ("image.gif");
φόντο-θέση: κεντρική κορυφή;
αναπαράσταση φόντου: επανάληψη-y;
}

Ο καθορισμός της τιμής σε 'repeat-y' λέει στο πρόγραμμα περιήγησης να προσδώσει την εικόνα φόντου κατά μήκος του άξονα y, aka κάθετα, αλλά όχι τον άξονα x (οριζόντια), ακριβώς αυτό που θέλαμε. Εάν θέλετε να το κεραμιδίσετε οριζόντια αλλά όχι κάθετα, θα χρησιμοποιούσατε την τιμή 'repeat-x'. αν δεν θέλατε να αποκατασταθεί η εικόνα, δώστε την τιμή "δεν επαναλαμβάνεται". Η προεπιλεγμένη τιμή είναι να ορίσετε την εικόνα τόσο οριζόντια όσο και κατακόρυφα, οπότε αν αυτή είναι η καλύτερη επιλογή για την εικόνα σας, δεν χρειάζεται να ορίσετε καθόλου την ιδιότητα "background-repeat".

Τέλος, μπορείτε να ρίξετε μια ματιά στην ιδιότητα "προσκόλλησης φόντου". Από προεπιλογή, η εικόνα σας θα μετακινηθεί καθώς η σελίδα κυλάει, οπότε αν δεν επαναλαμβάνετε την εικόνα κατακόρυφα και έχετε μια μακρά σελίδα, η εικόνα σας δεν θα επεκταθεί στο κάτω μέρος της σελίδας. Μπορείτε να το αλλάξετε ρυθμίζοντας την ιδιότητα «προσάρτημα φόντου» σε «σταθερή», η οποία προκαλεί την παραμονή της εικόνας φόντου στο ίδιο σημείο της οθόνης ανεξάρτητα από τον τρόπο κύλισης της σελίδας. Τώρα οι κανόνες του φόντου σας θα μοιάζουν με αυτό:

σώμα {
εικόνα-φόντου: url ("image.gif");
φόντο-θέση: κεντρική κορυφή;
αναπαράσταση φόντου: επανάληψη-y;
προσάρτηση φόντου: σταθερή.
}


Εάν θέλετε να διατηρήσετε τους κανόνες CSS όσο το δυνατόν μικρότεροι, μπορείτε να συνδυάσετε όλες τις τιμές φόντου σε μία γραμμή χρησιμοποιώντας την ιδιότητα 'background', όπως αυτή:

Ιστορικό {
url ("image.gif") επαναλαμβανόμενο κεντρικό κέντρο επανάληψης y;
}

Όταν χρησιμοποιείτε την ιδιότητα 'background', πρέπει να ορίσετε τις τιμές με μια συγκεκριμένη σειρά:
[φόντο-χρώμα (αν χρησιμοποιηθεί)] [φόντο-εικόνα] [επανάληψη φόντου] [προσάρτημα φόντου] [θέση φόντου]. Μπορείτε να αφήσετε οποιαδήποτε αξία που δεν χρειάζεστε, απλά πρέπει να ορίσετε όλες τις αξίες που χρησιμοποιείτε με τη σωστή σειρά ή ο κανόνας δεν θα λειτουργήσει.

Οδηγίες Βίντεο: Πώς Να Ορίσετε Φόντο Εικόνας Σε Φύλλο Εργασίας του Microsoft Excel; (Ενδέχεται 2024).