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