Αν είσαι σχεδιασμό ιστοσελίδας, μπορεί να σας ενδιαφέρει να μάθετε πώς να δημιουργείτε μια σταθερή εικόνα φόντου ή υδατογράφημα σε μια ιστοσελίδα. Αυτή είναι μια κοινή θεραπεία σχεδιασμού που είναι δημοφιλής στο διαδίκτυο εδώ και αρκετό καιρό. Είναι ένα βολικό αποτέλεσμα που έχετε στην τσάντα σχεδιασμού ιστοσελίδων σας με κόλπα.
Εάν δεν το έχετε κάνει πριν ή το έχετε δοκιμάσει στο παρελθόν χωρίς τύχη, η διαδικασία μπορεί να φαίνεται εκφοβιστική, αλλά στην πραγματικότητα δεν είναι καθόλου δύσκολη. Με αυτό το σύντομο σεμινάριο, θα λάβετε τις πληροφορίες που χρειάζεστε για να μάθετε την τεχνική μέσα σε λίγα λεπτά χρησιμοποιώντας CSS.
Ξεκινώντας
Οι εικόνες φόντου ή τα υδατογραφήματα (που είναι πραγματικά πολύ ελαφριές εικόνες φόντου) έχουν ιστορία σε έντυπη σχεδίαση. Τα έγγραφα περιλαμβάνουν εδώ και καιρό υδατογραφήματα για να αποτρέψουν την αντιγραφή τους. Επιπλέον, πολλά φυλλάδια και φυλλάδια χρησιμοποιούν μεγάλες εικόνες φόντου ως μέρος του σχεδιασμού του τυπωμένου κομματιού. Ο σχεδιασμός του διαδικτύου έχει στυλ δανεισμού από καιρό και οι εικόνες φόντου είναι ένα από αυτά τα είδη δανεισμού.
Αυτές οι μεγάλες εικόνες φόντου δημιουργούνται εύκολα χρησιμοποιώντας τα ακόλουθα τρία Στυλ CSS ιδιότητες:
- εικόνα φόντου
- επανάληψη φόντου
- φόντο-συνημμένο
- μέγεθος φόντου
Εικόνα φόντου
Θα χρησιμοποιήσετε την εικόνα φόντου για να ορίσετε την εικόνα που θα χρησιμοποιηθεί ως υδατογράφημα. Αυτό το στυλ χρησιμοποιεί απλώς μια διαδρομή αρχείου για να φορτώσει μια εικόνα που έχετε στον ιστότοπό σας, πιθανώς σε έναν κατάλογο με το όνομα εικόνες.
φόντο-εικόνα: url (/images/page-background.jpg);
Είναι σημαντικό η ίδια η εικόνα να είναι πιο ανοιχτή ή πιο διαφανής από μια κανονική εικόνα. Αυτό θα δημιουργήσει αυτό "στάθμη ύδατοςΚοιτάξτε με μια ημιδιαφανή εικόνα πίσω από το κείμενο, τα γραφικά και άλλα κύρια στοιχεία της ιστοσελίδας. Χωρίς αυτό το βήμα, η εικόνα φόντου θα ανταγωνίζεται τις πληροφορίες στη σελίδα σας και θα δυσκολευτεί να διαβαστεί.
Μπορείτε να προσαρμόσετε την εικόνα φόντου σε οποιοδήποτε πρόγραμμα επεξεργασίας όπως Adobe Photoshop.
Ιστορικό-Επανάληψη
Η ιδιότητα επανάληψης φόντου έρχεται στη συνέχεια. Αν θέλετε η εικόνα σας να είναι ένα μεγάλο γραφικό υδατογράφημα, θα χρησιμοποιούσατε αυτήν την ιδιότητα για να εμφανιστεί αυτή η εικόνα μόνο μία φορά.
επανάληψη φόντου: όχι-επανάληψη;
Χωρίς το χωρίς επανάληψη ιδιότητα, η προεπιλογή είναι ότι η εικόνα θα επαναληφθεί ξανά και ξανά στη σελίδα. Αυτό είναι ανεπιθύμητο στα περισσότερα μοντέρνα σχέδια ιστοσελίδων, έτσι αυτό το στυλ πρέπει να θεωρείται απαραίτητο στο CSS σας.
Ιστορικό-Συνημμένο
Το παρασκήνιο-συνημμένο είναι μια ιδιότητα που ξεχνούν πολλοί σχεδιαστές ιστού. Η χρήση του διατηρεί σταθερή την εικόνα φόντου σας όταν χρησιμοποιείτε το σταθερός ιδιοκτησία. Είναι αυτό που μετατρέπει αυτήν την εικόνα σε υδατογράφημα που είναι σταθερό στη σελίδα.
Η προεπιλεγμένη τιμή για αυτήν την ιδιότητα είναι πάπυρος. Εάν δεν καθορίσετε μια τιμή συνημμένου στο παρασκήνιο, το φόντο θα μετακινηθεί μαζί με την υπόλοιπη σελίδα.
φόντο-συνημμένο: σταθερό;
Μέγεθος φόντου
Το μέγεθος φόντου είναι μια νεότερη ιδιότητα CSS. Σας επιτρέπει να ορίσετε το μέγεθος ενός φόντου με βάση τη θύρα προβολής. Αυτό είναι πολύ χρήσιμο για ιστοσελίδες που ανταποκρίνονται που θα εμφανίζεται σε διαφορετικά μεγέθη σε διαφορετικές συσκευές.
μέγεθος φόντου: κάλυμμα;
Δύο χρήσιμες τιμές που μπορείτε να χρησιμοποιήσετε για αυτήν την ιδιότητα περιλαμβάνουν:
- Κάλυμμα - Κλίμακα του φόντου, ώστε να εμφανίζεται είτε το πλήρες πλάτος είτε το πλήρες ύψος. Αυτό σημαίνει ότι ορισμένα τμήματα της εικόνας ενδέχεται να μην εμφανίζονται στην οθόνη, αλλά ότι θα καλύπτεται ολόκληρη η περιοχή.
- Περιέχω - Κλίμακα της εικόνας, έτσι ώστε να εμφανίζεται ολόκληρο το πλάτος και το ύψος στην περιοχή που σχεδιάζεται. Η εικόνα δεν είναι κομμένη, αλλά το μειονέκτημα είναι ότι τμήματα της περιοχής ενδέχεται να μην καλύπτονται από την εικόνα.
Προσθήκη του CSS στη σελίδα σας
Αφού κατανοήσετε τις παραπάνω ιδιότητες και τις τιμές τους, μπορείτε να προσθέσετε αυτά τα στυλ στον ιστότοπό σας.
Προσθέστε τα ακόλουθα στο HEAD της ιστοσελίδας σας εάν δημιουργείτε έναν ιστότοπο μίας σελίδας. Προσθέστε το στα στυλ CSS ενός εξωτερικού φύλλου στυλ εάν δημιουργείτε έναν ιστότοπο πολλαπλών σελίδων και θέλετε να επωφεληθείτε από τη δύναμη ενός εξωτερικού φύλλου.
Αλλάξτε τη διεύθυνση URL της εικόνας φόντου για να ταιριάζει με το συγκεκριμένο όνομα αρχείου και τη διαδρομή αρχείου που σχετίζεται με τον ιστότοπό σας. Κάντε οποιεσδήποτε άλλες κατάλληλες αλλαγές για να ταιριάζει και στο σχέδιό σας και θα έχετε ένα υδατογράφημα.
Μπορείτε να καθορίσετε τη θέση, πάρα πολύ
Εάν θέλετε να τοποθετήσετε το υδατογράφημα σε μια συγκεκριμένη τοποθεσία στην ιστοσελίδα σας, μπορείτε να το κάνετε και αυτό. Για παράδειγμα, μπορεί να θέλετε το υδατογράφημα στη μέση της σελίδας ή ίσως στην κάτω γωνία, σε αντίθεση με την επάνω γωνία, η οποία είναι η προεπιλογή.
Για να το κάνετε αυτό, προσθέστε την ιδιότητα θέσης φόντου στο στυλ σας. Αυτό θα τοποθετήσει την εικόνα στο ακριβές σημείο που θα θέλατε να εμφανίζεται. Μπορείτε να χρησιμοποιήσετε τιμές pixel, ποσοστά ή ευθυγραμμίσεις για να επιτύχετε αυτό το αποτέλεσμα τοποθέτησης.
φόντο-θέση: κέντρο;