Ρύθμιση του GIF ' Μορφή ανταλλαγής γραφικών ' ως εικόνα φόντου προσθέτει ένα οπτικά ελκυστικό στοιχείο στο σχέδιο. Το GIF επιτρέπει στους προγραμματιστές να μεταφέρουν πληροφορίες ή να επισημάνουν ένα προϊόν ή μια υπηρεσία που βοηθά στη δημιουργία της οπτικής ταυτότητας μιας επωνυμίας. Ωστόσο, οι προγραμματιστές πρέπει να διασφαλίσουν ότι η χρήση των GIF δεν κατακλύζει την ιστοσελίδα ή δεν αποσπά την προσοχή του χρήστη από το κύριο περιεχόμενο.

Αυτό το άρθρο παρουσιάζει τη διαδικασία ορισμού ενός GIF ως εικόνας φόντου στην ιστοσελίδα.

Πώς να ορίσετε το GIF ως εικόνα φόντου στην ιστοσελίδα;

Ο ορισμός ενός GIF ως εικόνας φόντου βοηθά στη δημιουργία εντυπωσιακών στοιχείων προσθέτοντας οπτικά στοιχεία.

Τα GIF είναι ιδιαίτερα χρήσιμα σε ιστότοπους που θέλουν να μεταδώσουν μια αίσθηση παιχνιδιάρικης διάθεσης ή ιδιοτροπίας ή σε σελίδες που θέλουν να τονίσουν ένα συγκεκριμένο προϊόν ή χαρακτηριστικό. Για να το ορίσετε, ως εικόνα φόντου, επισκεφθείτε τα ακόλουθα παραδείγματα:

Παράδειγμα 1: Ορισμός GIF ως σταθερό φόντο

Καθώς τα στοιχεία HTML που βοηθούν στη δημιουργία του περιεχομένου της ιστοσελίδας τοποθετούνται μέσα στο ' <σώμα> ετικέτα '. Γι' αυτό, επιλέγοντας το « σώμα ' στοιχείο και εφαρμογή ιδιοτήτων CSS σε αυτό. Επηρεάζει όλα τα στοιχεία HTML που περιέχουν το ' <σώμα> ετικέτα '.

Για παράδειγμα, το «

' και '

Οι ετικέτες χρησιμοποιούνται ως περιεχόμενο της ιστοσελίδας. Δείτε το παρακάτω απόσπασμα κώδικα:

< σώμα >
< h1 > Ρύθμιση GIF όπως και μια εικόνα φόντου στη σελίδα h1 >
< Π > Αυτό το GIF έχει προστεθεί όπως και μια εικόνα φόντου σε ολόκληρη τη σελίδα χρησιμοποιώντας 'εικόνα φόντου' Ιδιοκτησία. Αυτό το άρθρο έχει τροφοδοτηθεί από το Linuxhint. Π >
σώμα >

Τώρα, επιλέξτε το στοιχείο HTML 'body' μέσα στο ' <στυλ> 'ετικέτα ή σε ξεχωριστό' CSS ” αρχείο για εφαρμογή στυλ στην ιστοσελίδα:

σώμα {
φόντο-εικόνα: url ( 'sea.gif' ) ;
background-repeat: no-repeat;
Μέγεθος φόντου: εξώφυλλο;
padding:50px;
μέγεθος γραμματοσειράς: x-large;
άσπρο χρώμα;
}

Στο παραπάνω μπλοκ κώδικα:

• • Πρώτον, το « url() Χρησιμοποιείται η μέθοδος που αποθηκεύει τη διαδρομή του GIF ' αρχείο. Και αυτή η μέθοδος μεταβιβάζεται ως τιμή στο CSS ' εικόνα φόντου ” ιδιοκτησία.
  • Στη συνέχεια, ορίστε ' χωρίς επανάληψη 'ως τιμή στο CSS' φόντο-επανάληψη ” ιδιότητα για την επανάληψη του αρχείου GIF.
  • Στη συνέχεια, ορίστε την τιμή του ' κάλυμμα 'στο CSS' μέγεθος φόντου ” ακίνητο να καλύψει όλο τον διαθέσιμο χώρο
  • Μετά από αυτό, δώστε την τιμή του ' 50 εικονοστοιχεία ' και ' x-large 'στο CSS' υλικό παραγεμίσματος ' και ' μέγεθος γραμματοσειράς ” ακίνητα, αντίστοιχα. Αυτό προσθέτει διάστημα γύρω από το κείμενο και μεγεθύνει το μέγεθος της γραμματοσειράς.

Μετά τη συλλογή, η ιστοσελίδα μοιάζει με αυτό:

Η παραπάνω έξοδος δείχνει ότι ένα gif έχει προστεθεί ως φόντο στην ιστοσελίδα.

Παράδειγμα 2: Ρύθμιση του GIF ως φόντο με δυνατότητα κύλισης

Αρχικά, δημιουργήστε μια δομή HTML για να δημιουργήσετε ένα περιεχόμενο Ιστοσελίδας ως εξής:

< div τάξη = 'περιέχει' >
< h1 > Ρύθμιση GIF όπως και μια εικόνα φόντου στη σελίδα h1 >
< Π > Αυτό το GIF έχει προστεθεί όπως και μια εικόνα φόντου σε ολόκληρη τη σελίδα χρησιμοποιώντας το 'εικόνα φόντου' Ιδιοκτησία. Αυτό το άρθρο έχει τροφοδοτηθεί από το Linuxhint. Π >
div >

< div >
< h3 στυλ = 'άσπρο χρώμα;' > Περιεχόμενο γραμμένο έξω από το 'div' στοιχείο h3 >
div >

Στον παραπάνω κώδικα:

• • Πρώτον, ο γονιός»
    Η ετικέτα ' χρησιμοποιείται με μια κλάση ' περιέχω '.
  • Στη συνέχεια, χρησιμοποιήστε το ' h1 ' και ' Π ” Στοιχεία HTML και παρέχετε εικονικό περιεχόμενο σε αυτά.
  • Μετά από αυτό, δημιουργήστε ένα άλλο '
    'και χρησιμοποιήστε το '

    επισημάνετε την ετικέτα παρέχοντας εικονικά δεδομένα σε αυτό.

Τώρα, προσθέστε το GIF ως φόντο στην ιστοσελίδα, εισάγοντας τις ακόλουθες ιδιότητες CSS:

.contai {
φόντο-εικόνα: url ( θάλασσα.gif ');
background-repeat: no-repeat;
Μέγεθος φόντου: εξώφυλλο;
Ύψος: 100vh;
οθόνη: flex;
στοίχιση-στοιχεία: κέντρο;
justify-content: κέντρο;
flex-direction: στήλη;
άσπρο χρώμα;
μέγεθος γραμματοσειράς: μεγάλο;
text-align: κέντρο;
padding: 2rem;
}

Η περιγραφή του μπλοκ κώδικα που χρησιμοποιήθηκε παραπάνω:

• • Πρώτα, ορίστε το ' εικόνα-μονοπάτι », « χωρίς επανάληψη t' και ' κάλυμμα 'ως τιμή στο CSS' εικόνα φόντου », « φόντο-επανάληψη ' και ' μέγεθος φόντου ” ακίνητα, αντίστοιχα.
  • Στη συνέχεια, ορίστε την τιμή του ' 100vh ' και ' καλώδιο 'στο CSS' ύψος ' και ' απεικόνιση ' ιδιότητες.
  • Μετά από αυτό, χρησιμοποιήστε το CSS ' χρώμα », « μέγεθος γραμματοσειράς », « στοίχιση κειμένου ' και ' υλικό παραγεμίσματος ” ιδιότητες για εφαρμογή στυλ στο περιεχόμενο.

Μετά το τέλος της διαδικασίας μεταγλώττισης, η ιστοσελίδα μοιάζει με αυτό:

Η έξοδος δείχνει ότι το ' GIF ” έχει εισαχθεί ως εικόνα φόντου σε ολόκληρη τη σελίδα.

συμπέρασμα

Για να ορίσετε το GIF ως εικόνα φόντου στην ιστοσελίδα, το CSS ' εικόνα φόντου 'η ιδιότητα χρησιμοποιείται στο HTML' σώμα ' στοιχείο. Η ιδιότητα CSS που εφαρμόζεται στο στοιχείο 'body' εφαρμόζεται αυτόματα σε όλα τα στοιχεία που περιέχουν. Ρυθμίζοντας το ' 100vh Ως τιμή στην ιδιότητα ύψους, μπορεί επίσης να ενεργοποιηθεί το εφέ κύλισης. Επιτρέπει στο gif φόντου να κινείται κατά μήκος της κύλισης. Αυτό το άρθρο έχει δείξει πώς να ορίσετε ένα GIF ως εικόνα φόντου στην ιστοσελίδα.