Ορισμός μιας εικόνας ως φόντο για έναν πίνακα σε μια ιστοσελίδα

click fraud protection

Η διαφοροποίηση των πινάκων από το υπόβαθρό τους βοηθά να τονιστεί το περιεχόμενο του πίνακα σε σχέση με οτιδήποτε άλλο στην ιστοσελίδα. Για να προσθέσετε ένα φόντο πίνακα, θα πρέπει να κάνετε αλλαγές στο διαδοχικό φύλλο στυλ υποστηρίζοντας την ιστοσελίδα σας.

Σύγχρονα κτίρια γραφείων που αποτελούν μέρος του Greenwich Peninsula Regeneration, South East London, UK
Κατασκευαστική Φωτογραφία / Avalon / Getty Images

Ξεκινώντας

Ο καλύτερος τρόπος για να προσθέσετε μια εικόνα φόντου σε έναν πίνακα είναι να χρησιμοποιήσετε το CSS Ιστορικό ιδιοκτησία. Για να προετοιμάσετε τον εαυτό σας να γράψετε το CSS αποτελεσματικά και να αποφύγετε απρόσμενες δυσλειτουργίες στην οθόνη, ανοίξτε την εικόνα φόντου σας και σημειώστε το ύψος και το πλάτος. Στη συνέχεια, ανεβάστε την εικόνα σας στον πάροχο φιλοξενίας σας. Δοκιμάστε τη διεύθυνση URL για την εικόνα. Ένας από τους πιο συνηθισμένους λόγους για τους οποίους δεν εμφανίζονται οι εικόνες είναι επειδή υπάρχει τυπογραφικό λάθος στη διεύθυνση URL.

Εισαγάγετε ένα μπλοκ στυλ CSS στην κεφαλή του εγγράφου σας:


Γράψτε το CSS σας για το φόντο στο τραπέζι σας και τοποθετήστε το μέσα στο μπλοκ στυλ:

instagram viewer

Τοποθετήστε το τραπέζι σας στο HTML:

κελί 1cell 2
κελί 1cell 2
Ορίστε το πλάτος και το ύψος του πίνακα ώστε να ταιριάζει με το πλάτος και το ύψος της εικόνας.

Ορίστε το πλάτος και το ύψος του πίνακα ώστε να ταιριάζει με το πλάτος και το ύψος της εικόνας.

Εάν τα περιεχόμενα του πίνακα σας είναι μεγαλύτερα από το ύψος και το πλάτος της εικόνας, η εικόνα φόντου θα εμφανίζεται μόνο μία φορά.

Βάλτε ένα φόντο σε έναν μόνο πίνακα

Οι παραπάνω οδηγίες θα ορίσουν την ίδια εικόνα φόντου σε κάθε πίνακα της σελίδας. Για να βάλετε το φόντο μόνο σε συγκεκριμένους πίνακες, χρησιμοποιήστε ένα τάξη Χαρακτηριστικό. Πρόσθεσε το τάξηΙστορικό σε οποιονδήποτε πίνακα θέλετε να έχετε αυτήν την εικόνα φόντου. Ορίστε το πλάτος και το ύψος για αυτούς τους πίνακες.

Αφήστε την εικόνα φόντου πίνακα να επαναληφθεί

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

background: url ("URL to image") επανάληψη. 

Από προεπιλογή, η τιμή επανάληψης θα έχει πλακάκια, αλλά μπορείτε επίσης να ορίσετε την τιμή επανάληψης σε.

επανάληψη-x

ή.

επανάληψη-γ

να πλακάρετε οριζόντια ή κάθετα, αντίστοιχα.

Τα χρώματα φόντου κελιού αποκλείουν την εικόνα φόντου πίνακα

Οποιαδήποτε χρώματα φόντου Ορίστε στο τραπέζι τα κελιά παρακάμπτουν την εικόνα φόντου στον πίνακα. Επομένως, προσέξτε όταν χρησιμοποιείτε χρώματα φόντου στα κελιά σας σε συνδυασμό με εικόνες φόντου πίνακα.

Σκέψεις

Κάθε εικόνα που χρησιμοποιείτε πρέπει να διαθέτει κατάλληλη άδεια. απλώς και μόνο επειδή μπορείτε να βρείτε μια φωτογραφία στον Ιστό δεν σημαίνει ότι μπορείτε να την ταιριάξετε για δική σας χρήση. Σεβαστείτε τα πνευματικά δικαιώματα!

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

instagram story viewer