Εικόνα φόντου CSS - Πώς να προσθέσετε μια διεύθυνση URL εικόνας στο Div σας

Ας υποθέσουμε ότι θέλετε να βάλετε μια εικόνα ή δύο σε μια ιστοσελίδα. Ένας τρόπος είναι να χρησιμοποιήσετε την background-imageιδιότητα CSS.

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

Προσθέστε μια εικόνα

Είναι εύκολο να προσθέσετε μια εικόνα χρησιμοποιώντας την background-imageιδιότητα. Απλώς δώστε τη διαδρομή προς την εικόνα στην url()τιμή.

Η διαδρομή εικόνας μπορεί να είναι μια διεύθυνση URL, όπως φαίνεται στο παρακάτω παράδειγμα:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Ή μπορεί να είναι ένα τοπικό μονοπάτι. Ακολουθεί ένα παράδειγμα:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Προσθήκη πολλαπλών εικόνων

Μπορείτε να εφαρμόσετε πολλές εικόνες στην background-imageιδιοκτησία.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

Αυτός είναι πολύς κώδικας. Ας το σπάσουμε.

Διαχωρίστε κάθε url()τιμή εικόνας με κόμμα.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

Τώρα τοποθετήστε και βελτιώστε τις εικόνες σας εφαρμόζοντας επιπλέον ιδιότητες.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Υπάρχουν πολλές δευτερεύουσες ιδιότητες που μπορείτε να προσθέσετε στις εικόνες φόντου σας, όπως background-repeatκαι background-position, τις οποίες χρησιμοποιήσαμε στο παραπάνω παράδειγμα. Μπορείτε ακόμη και να προσθέσετε ντεγκραντέ σε μια εικόνα φόντου.

Δείτε πώς μοιάζει όταν συνδυάζουμε τα πάντα.

Θέματα παραγγελίας

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

Εδώ είναι ένα παράδειγμα.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

Παραθέσαμε δύο εικόνες στον παραπάνω κώδικα. Η πρώτη εικόνα (morocco-blue.png) θα είναι μπροστά από τη δεύτερη (oriental-tiles.png). Και οι δύο εικόνες έχουν το ίδιο μέγεθος και στερούνται αδιαφάνειας, επομένως βλέπουμε μόνο την πρώτη εικόνα.

Αλλά αν μετακινήσουμε τη δεύτερη εικόνα (oriental-tiles.png) προς τα δεξιά κατά 200 pixel, τότε μπορείτε να δείτε μέρος της (τα υπόλοιπα παραμένουν κρυμμένα).

Δείτε πώς μοιάζει όταν συνδυάζουμε τα πάντα.

Πότε πρέπει να χρησιμοποιήσετε την εικόνα φόντου;

Υπάρχουν πολλά να μου αρέσουν τα background-imageακίνητα. Αλλά υπάρχει ένα μειονέκτημα.

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

Αυτό συμβαίνει επειδή δεν μπορείτε να προσθέσετε πληροφορίες κειμένου στην background-imageιδιοκτησία. Ως αποτέλεσμα, η εικόνα θα χαθεί από τους αναγνώστες οθόνης.

Χρησιμοποιήστε την background-imageιδιότητα μόνο όταν πρέπει να προσθέσετε κάποια διακόσμηση στη σελίδα σας. Διαφορετικά, χρησιμοποιήστε το στοιχείο HTML εάν μια εικόνα έχει νόημα ή σκοπό, όπως σημειώνει η τεκμηρίωση.

Με αυτόν τον τρόπο, μπορείτε να προσθέσετε κείμενο σε ένα στοιχείο εικόνας, χρησιμοποιώντας το altχαρακτηριστικό, το οποίο περιγράφει την εικόνα. Το παρεχόμενο κείμενο θα παραληφθεί από τους αναγνώστες οθόνης.

Σκεφτείτε το με αυτόν τον τρόπο: background-imageείναι ιδιοκτησία CSS και το CSS εστιάζει στην παρουσίαση ή το στυλ. Το HTML εστιάζει στη σημασιολογία ή στο νόημα.

Όσον αφορά τις εικόνες, έχετε επιλογές. Εάν απαιτείται εικόνα για διακόσμηση, τότε το background-imageκατάλυμα μπορεί να είναι μια καλή επιλογή για εσάς.

Γράφω για την εκμάθηση του προγράμματος και τους καλύτερους τρόπους για να το κάνουμε ( amymhaddad.com).