Αναμείνατε ολίγον τι
Web Devel

Πολλαπλά φόντα με την βοήθεια του CSS

CSS code

Με την βοήθεια του CSS μπορεί κανείς να ελέγξει τι βρίσκεται στο φόντο (background) των διαφορων στοιχείων (elements).

Μπορείς να βάλεις ένα συγκεκριμένο background-color και να το γεμίσεις με ένα συγκεκριμένο χρώμα, ή να ορίσεις το background-image και να το γεμίσεις με μία συγκεκριμένη εικόνα, ή μπορείς να κάνεις και συνδυασμό των δύο.

Σε αυτό το παράδειγμα βλέπουμε το πως μπορούμε να χρησιμοποιήσουμε μία SVG εικόνα στο φόντο, ενσωματώνοντας την απευθείας μέσα στον κώδικα του CSS ως data URL.

See the Pen background color and image together by Chris Coyier (@chriscoyier) on CodePen.


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

Αν το αφήσουμε έτσι, το image-one.jpg θα επαναλαμβάνεται και θα καλύψει εντελώς το image-two.jpg. Μπορούμε όμως να τις ελέγξουμε ξεχωριστά, με άλλα background properties.

Βάζοντας και στο background-position κόμματα, μπορούμε να ορίσουμε τι ισχύει για την κάθε εικόνα ξεχωριστά.

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

Είδαμε τι γίνεται με δύο μόνο εικόνες, τι συμβαίνει όμως όταν βάλουμε περισσότερες;

Εδώ έχουμε ορίσει 4 εικόνες, την καθεμία στοιχισμένη στην κάθε γωνία με ένα μικρό offset.

See the Pen Example of multiple backgrounds by Chris Coyier (@chriscoyier) on CodePen.

Προχωρώντας λίγο πιο πέρα, δεν μπορούμε να περιστρέψουμε (rotate) ή να γυρίσουμε (flip) τις background images, αλλά μπορούμε να κάνουμε τέτοια πράγματα σε ολόκληρα elementspseudo-elements).

See the Pen Flipping Image So You Can Use Just One by Chris Coyier (@chriscoyier) on CodePen.

Θα πρέπει να σημειώσουμε ότι αν χρησιμοποιήσουμε πολλαπλές εικόνες, λειτουργεί σαν στοίβα (FIFO) και η πρώτη βρίσκεται στην κορυφή.

Θα μπορούσε να πει κανείς ότι θυμίζει το z-index, αλλά δεν είναι. Σίγουρα είναι κομμάτια ενός μεγαλύτερου αντικειμένου.

Μπορεί να μπερδέψει κάποιον γιατί λειτουργεί “ανάποδα” απ’ ότι η HTML. Αν κάποια στοιχεία έχουν το ίδιο z-index -και είναι τοποθετημένα έτσι ώστε να καλύπτουν το ένα το άλλο- το τελευταίο αντικείμενο θα είναι και αυτό που θα εμφανιστεί πάνω πάνω.

Επίσης μπορεί κανείς να χρησιμοποιήσει τα gradients σαν background-images. Για παράδειγμα:

See the Pen Tinted Image w/ Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.

Πηγή

css-tricks.com – CSS Basics: Using Multiple Backgrounds
Sai Kiran Anagani

Μοιραστείτε το άρθρο

The following two tabs change content below.

agathan

Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην τεχνική υποστήριξη του τμήματος. Ακολούθησε το μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Google Ads engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.

"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Αφήστε ένα σχόλιο

Επιλογές της ομάδας
σκίτσο του Άλμπερτ Αϊνστάιν
Πώς τα μυστικά των πρώτων αριθμών κάνουν τον κόσμο μας ασφαλέστερο
Πώς ο Ερατοσθένης υπολόγισε την περιφέρεια της Γης πάνω από 2000 χρόνια πριν;
Τι θα γινόταν αν ο αυτισμός ήταν ... υπερδύναμη;
Εκπληκτικές φωτογραφίες του Cassini λίγο πριν τη συντριβή του στον Κρόνο