Τεντώστε και κλιμακώστε το φόντο CSS

Υπάρχει τρόπος να κάνετε ένα φόντο σε CSS να τεντώνεται ή να κλιμακώνεται ώστε να γεμίζει το δοχείο του;

Όχι επί του παρόντος. Θα είναι διαθέσιμο στο CSS 3, αλλά θα χρειαστεί λίγος χρόνος μέχρι να εφαρμοστεί στα περισσότερα προγράμματα περιήγησης.

Σχόλια (5)

Με μία λέξη: όχι. Ο μόνος τρόπος για να τεντώσετε μια εικόνα είναι με την ετικέτα ``. Θα πρέπει να είστε δημιουργικοί,

Αυτό ίσχυε το 2008, όταν γράφτηκε η απάντηση. Σήμερα οι σύγχρονοι φυλλομετρητές υποστηρίζουν το background-size που λύνει αυτό το πρόβλημα. Προσέξτε ότι ο IE8 δεν το υποστηρίζει.

Σχόλια (1)

Ορίστε το "stretch and scale"...

Εάν έχετε μια μορφή bitmap, δεν είναι γενικά σπουδαίο (μιλώντας γραφικά) να την τεντώσετε και να την τραβήξετε. Μπορείτε να χρησιμοποιήσετε επαναλαμβανόμενα μοτίβα για να δώσετε την ψευδαίσθηση του ίδιου αποτελέσματος. Για παράδειγμα, αν έχετε μια διαβάθμιση που γίνεται πιο ανοιχτή προς το κάτω μέρος της σελίδας, τότε θα μπορούσατε να χρησιμοποιήσετε ένα γραφικό που'ειναι ένα μόνο pixel πλάτος και το ίδιο ύψος με το δοχείο σας (ή κατά προτίμηση μεγαλύτερο για να ληφθεί υπόψη η κλιμάκωση) και στη συνέχεια να το τοποθετήσετε σε όλη τη σελίδα. Ομοίως, αν η διαβάθμιση διατρέχει όλη τη σελίδα, θα ήταν ύψους ενός pixel και ευρύτερη από το δοχείο σας και θα επαναλαμβανόταν κατά μήκος της σελίδας.

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

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

Όσο για να κάνετε την εικόνα να συρρικνώνεται και να μεγαλώνει πραγματικά μαζί με το δοχείο, θα πρέπει να χρησιμοποιήσετε κάποια κόλπα διαστρωμάτωσης για να κάνετε την εικόνα να φαίνεται ότι λειτουργεί ως φόντο και κάποια javascript για να αλλάξετε το μέγεθός της μαζί με το δοχείο. Δεν υπάρχει κανένας τρέχων τρόπος να γίνει αυτό με CSS...

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

Σχόλια (2)