Πώς να κάνει ένα γέμισμα ντεγκραντέ φόντο σε HTML

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

Παρουσίαση Περισσότερες οδηγίες
απλή μορφή HTML
Η

1 Ανοίξτε το αγαπημένο σας πρόγραμμα γραφικών σας , όπως το Gimp , Photoshop , ή Βαφείο και να δημιουργήσετε μια νέα εικόνα που είναι 5 pixels ύψος και 760 pixels σε όλη χρησιμοποιώντας ένα ψήφισμα 800 - pixel . Για μια ανάλυση 1024 - pixel , κάνει την εικόνα 984 pixels πλάτος , αντ 'αυτού. 2

Επιλέξτε εργαλείο γεμίσματος σας και το Gradient αποτέλεσμα , και να επιλέξετε δύο χρώματα σας , ένα από το σημείο εκκίνησης της κλίσης , και το άλλο μέχρι το τελικό σημείο .
εικόνων 3

Αποθηκεύστε το αρχείο σε μορφή JPG στον κατάλογο της εικόνας απευθείας σύνδεση ιστοχώρο σας και προσθέστε την ακόλουθη στον κώδικα HTML της συγκεκριμένης σελίδας , όπου η ? ενότητα ξεκινά :

Αναπληρωτής " name.jpg " για το αρχείο σας . Ιστοσελίδα σας θα δείξει τώρα μια κλίση φόντο.
Εικόνων χρησιμοποιώντας τα επικαλυπτόμενα φύλλα στυλ στην HTML
Η 4

Δημιουργήστε ένα φύλλο στυλ CSS ή τη μέθοδο της κλίσης υπόβαθρο για την ιστοσελίδα σας σελίδα φτιάχνοντας πρώτα μία διαβάθμιση εικόνα όπως στο προηγούμενο παράδειγμα, μόνο αυτή τη φορά να καταστεί η εικόνα 1 pixel πλάτος και 800 pixels ύψος . Το πρότυπο για την προβολή στις περισσότερες οθόνες είναι 800 pixels . Αποθηκεύστε την εικόνα ως JPG στον κατάλογο της εικόνας της ιστοσελίδας σας .
5

Open και σάρωση μέσω του CSS κώδικα σας χρησιμοποιώντας το αγαπημένο σας επεξεργαστή κειμένου . Το αρχείο θα βρίσκεται στον κατάλογο της ιστοσελίδας σας με την κατάληξη " . Css " . Προσθέστε τον ακόλουθο κώδικα στο CSS τμήμα του σώματός σας :

body {background : url ( images /name.jpg ) 0 % 0 % επανάληψη - x ? Χρώμα : # 000000 ? Ύψος: 800px ? Padding : 5px? }

το « φόντο : " δήλωση περιέχει το αρχείο εικόνας και τη διαδρομή σας , και η "επανάληψη - x" και " 0 % 0 % " λέει το πρόγραμμα περιήγησης η αρχική θέση της εικόνας για το xy άξονα , στην περίπτωση αυτή στο 0,0 ή στο ανώτερο , αριστερά - πιο σημείο της οθόνης , και στη συνέχεια να επαναλάβετε την εικόνα κατά μήκος του άξονα x , ή ολόκληρη τη σελίδα.
Η 6

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

Για παράδειγμα, εάν το κάτω μέρος του κλίση εικόνας είναι μαύρο , ο κωδικός θα έχει ως εξής : .
<Ρ > body {background : # 000000 url ( images /name.jpg ) 0 % 0 % επανάληψη - x ? χρώμα : # 000000 ? ύψος: 800px ? padding : 5px }

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

Μπορείτε να εντοπίσετε τον κωδικό hexidecimal για το χρώμα σας με το άνοιγμα της εικόνας σας στο πρόγραμμα γραφικών σας , και επιλέγοντας το εργαλείο σταγονόμετρο και δείχνοντας στην κάτω σειρά των pixels . Μόλις επιλέξετε το χρώμα και επιλέξτε εργαλεία σας , μπορείτε να βρείτε τον κώδικα .
Η
εικόνων