Αποκριτικές εικόνες φόντου. Μεγάλο μέγεθος φόντου παρακαλώ! CSS

Μετάφραση: Vlad Merzhevich

Στο CSS 2.1, μια εικόνα φόντου που εφαρμόζεται σε ένα κοντέινερ διατηρεί τις σταθερές της διαστάσεις. Ευτυχώς, το CSS3 εισήγαγε την ιδιότητα μεγέθους φόντου, η οποία επιτρέπει στο φόντο να τεντωθεί ή να συμπιεστεί. Είναι ιδανικό εάν δημιουργείτε ένα αποκριτικό πρότυπο σχεδίασης ιστοσελίδων.

Υπάρχουν διάφοροι τρόποι για να ορίσετε μεγέθη - ρίξτε μια ματιά στη σελίδα επίδειξης μεγέθους φόντου.

Απόλυτη αλλαγή μεγέθους

Ενδέχεται να ισχύουν μονάδες μέτρησης.

Μέγεθος φόντου: πλάτος-ύψος;

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

Μπορείτε να ρωτήσετε νέο μέγεθοςεικόνες που χρησιμοποιούν απόλυτες μονάδες μέτρησης όπως px, em, cm, κ.λπ. Οι αναλογίες θα αλλάξουν εάν είναι απαραίτητο. Για παράδειγμα, εάν η εικόνα φόντου μας έχει διαστάσεις 200x200 pixel, τότε ο παρακάτω κώδικας θα αφήσει αυτό το ύψος, αλλά θα κάνει το πλάτος στο μισό:

Μέγεθος φόντου: 100px 200px;

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

Μέγεθος φόντου: 100 px;

/* παρόμοια */ μέγεθος φόντου: 100 px auto;

Αυτός ο κωδικός κλιμακώνει την εικόνα από 200x200 σε 100x100 pixel.

Σχετική αλλαγή μεγέθους μέσω ποσοστών

Εάν εφαρμόζονται ποσοστά, οι διαστάσεις βασίζονται στο στοιχείο και ΟΧΙ στην εικόνα:

Μέγεθος φόντου: 50% auto;

Επομένως, το πλάτος της εικόνας φόντου εξαρτάται από τις διαστάσεις του κοντέινερ. Εάν το κοντέινερ έχει πλάτος 500 px, τότε το μέγεθος της εικόνας μας θα μειωθεί σε 250x250. Η χρήση ποσοστών μπορεί να είναι χρήσιμη γιαπροσαρμοστικός σχεδιασμός

. Αλλάξτε το πλάτος της δοκιμαστικής σελίδας για να δείτε πώς αλλάζουν οι διαστάσεις.

Κλιμάκωση στο μέγιστο μέγεθος

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

Μέγεθος φόντου: περιέχει;

Γεμίστε με φόντο

Η ιδιότητα μεγέθους φόντου κατανοεί επίσης τη λέξη-κλειδί εξωφύλλου. Η εικόνα θα κλιμακωθεί ώστε να γεμίσει ολόκληρο το κοντέινερ, αλλά αν οι λόγοι διαστάσεων είναι διαφορετικοί, η εικόνα θα περικοπεί.

Μέγεθος φόντου: εξώφυλλο;

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

Φόντο: url("sheep.png") 60% 90% μη επανάληψη, url("sheep.png") 40% 50% μη επανάληψη, url("sheep.png") 10% 20% μη επανάληψη # 393;

Μέγεθος φόντου: 240 px 210 px, αυτόματη, 150 px;

Εργασία σε προγράμματα περιήγησης

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

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

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

Η εικόνα φόντου CSS 2.1 που εφαρμόστηκε στο κοντέινερ διατήρησε τις σταθερές της διαστάσεις. Ήταν αδύνατο να αλλάξει το μέγεθος της εικόνας φόντου. Ευτυχώς, το CSS3 εισήγαγε την ιδιότητα μεγέθους φόντου, η οποία επιτρέπει στο φόντο να τεντωθεί ή να συμπιεστεί.

Απόλυτη αλλαγή μεγέθους

Υπάρχουν διάφοροι τρόποι προσδιορισμού μεγεθών -.

/* παρόμοια */ μέγεθος φόντου: 100 px auto;

Αυτός ο κωδικός κλιμακώνει την εικόνα από 200x200 σε 100x100 pixel.

Σχετική αλλαγή μεγέθους μέσω ποσοστών

Μέγεθος φόντου: περιέχει;

Μέγεθος φόντου: εξώφυλλο;

: κάλυμμα;

φόντο : url ("sheep.png" ) 60% 90% χωρίς επανάληψη , url ("sheep.png" ) 40% 50% μη επανάληψη , url ("sheep.png" ) 10% 20% μη επανάληψη # 393; : 240 px 210 px, αυτόματη, 150 px; Ολοιπιο πρόσφατες εκδόσεις

τα προγράμματα περιήγησης υποστηρίζουν την ιδιότητα μεγέθους φόντου.

Σύναψη

Λοιπόν, τώρα ξέρουμε πώς να ελέγχουμε το μέγεθος της εικόνας φόντου χρησιμοποιώντας Cascading Style Sheets.

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

. Χρησιμοποιώντας CSS αυτό είναι εύκολο να επιτευχθεί. Το μόνο που χρειάζεται να κάνετε είναι να γράψετε την κατάλληλη γραμμή κώδικα:

Το Παράδειγμα 1 δείχνει μια κεντραρισμένη εικόνα φόντου 1280px X 960px όπου η περιοχή με δυνατότητα προβολής είναι σταθερή (δηλαδή, δεν κάνει κύλιση με το έγγραφο).

Αλλά τι μέγεθος εικόνας χρειάζεστε; Οθόνες και λειτουργικά συστήματααναπτύσσονται αρκετά γρήγορα, και ως αποτέλεσμα έχουμε μεγάλη γκάμα αναλύσεις οθόνης. Οι πιο δημοφιλείς αναλύσεις σήμερα είναι: 1024x768px, 1280x800px, 1280x1024px και 1440x900px. Ωστόσο, με την εμφάνιση των οθονών HD και των επαγγελματικών οθονών που υποστηρίζουν αναλύσεις έως και 2560x1600 px, υπάρχουν ακόμη περισσότερες επιλογές.

Υπάρχουν επίσης πολλές περιπτώσεις που χρειάζεται χαμηλή ανάλυση. Πολλοί χρήστες κάνουν το παράθυρο του προγράμματος περιήγησής τους μικρότερο για να ελευθερώσουν χώρο στην οθόνη για άλλους σκοπούς, ενώ ορισμένες οθόνες διατηρούν ανάλυση 800x600 px. Επίσης, ας μην ξεχνάμε τον αυξανόμενο ρόλο των φορητών υπολογιστών.

Αντί να χρησιμοποιείτε μια σταθερή εικόνα συγκεκριμένου μεγέθους, δεν θα ήταν καλύτερο να κλιμακώσετε την εικόνα ανάλογα με το μέγεθος του παραθύρου; Δυστυχώς, το CSS 2.1 δεν παρέχει τη δυνατότητα κλιμάκωσης της εικόνας φόντου.

Υπάρχουν πολλά τεχνητά κόλπα, αλλά όλα βασίζονται στο στοιχείο img HTML (αντί για το φόντο CSS). Αυτές οι μέθοδοι χρησιμοποιούν επίσης απόλυτη τοποθέτησηγια επίπεδα ή πίνακες ή σενάρια που σας επιτρέπουν να αλλάξετε το μέγεθος μιας εικόνας. Επιπλέον, δεν διατηρούν όλες αυτές οι μέθοδοι τις αναλογίες της εικόνας, τεντώνοντας τις εικόνες εντελώς μη ρεαλιστικά.

Τα φόντα CSS3 σώζουν την ημέρα

Το W3C CSS ορίζει την ιδιότητα μέγεθος φόντου, που καλύπτει τις ανάγκες μας.

Ενδιαφέρουσες έννοιες:

Περιέχω

Κλιμακώνει την εικόνα με διατηρώντας τις αναλογίεςέτσι ώστε ολόκληρη η εικόνα να χωράει μέσα στο μπλοκ.

Κάλυμμα

Κλιμακώνει την εικόνα διατηρώντας τις αναλογίες της έτσι ώστε το πλάτος ή το ύψος της να είναι ίσο με το πλάτος ή το ύψος του μπλοκ.

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

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

Επιτρέπετε την κλίμακα του φόντου προσθέτοντας τον ακόλουθο κώδικα:

Κύριο μέρος ( φόντο: #000 url(myBackground_1280x960.jpg) » σταθερό κέντρο στο κέντρο χωρίς επανάληψη; -moz-background-size: cover; background-size: cover; )

ιδιοκτησία μεγέθους φόντουήδη υποστηρίζεται Πρόγραμμα περιήγησης Firefox 3.6 (χρησιμοποιώντας το πρόθεμα –moz, ο Firefox 4 θα χρησιμοποιεί ιδιότητες CSS3), Chrome 5, Safari 5 και Opera 10.54. και θα συμπεριληφθεί σε Internet Explorer 9. Senior webkit και Εκδόσεις Operaυποστηρίζουν ήδη την ιδιοκτησία μεγέθους φόντου, ωστόσο η υλοποίησή τους βασίζεται σε προηγούμενα έργα που δεν περιλαμβάνουν λέξεις-κλειδιάΠεριέχει και καλύπτει.

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

Ας προσθέσουμε ερωτήματα μέσων CSS3

Η ενότητα (W3C CSS3 Media Queries Module) θα εισαγάγει κανόνες υπό όρους που θα παρέχει υπό όρους παραγγελίακατά την κατάταξη ύψους και πλάτους φόντου. Αυτό θα μας επιτρέψει να κλιμακώσουμε το φόντο από το ελάχιστο πλάτος/ύψος και πάνω. Ερωτήματα μέσων ενημέρωσηςυποστηρίζεται από Firefox 3.5, Chrome, Safari 3, Opera 7 και θα περιλαμβάνεται επίσης στον Internet Explorer 9.

Οι ακόλουθοι κανόνες στυλ θα υποδείξουν στο πρόγραμμα περιήγησης να μην κλιμακώσει την εικόνα φόντου σε 1024x768 px.

Κύριο μέρος ( φόντο: #000 url(myBackground_1280x960.jpg) » σταθερό κέντρο στο κέντρο χωρίς επανάληψη; -moz-background-size: cover; background-size: cover; )
@media μόνο όλα και (μέγ. πλάτος: 1024 εικονοστοιχεία) και (μέγ. ύψος: 768 εικονοστοιχεία) ( σώμα ( -moz-μέγεθος φόντου: 1024 εικονοστοιχεία 768 εικονοστοιχεία; μέγεθος φόντου: 1024 εικονοστοιχεία 768 εικονοστοιχεία; )
}

Σημείωση, τα 1024x768px έχουν τις ίδιες αναλογίες με την εικόνα φόντου (1280x960px). Όταν εφαρμόζονται διαφορετικές αναλογίες (αναλογίες), μπορεί να επιτευχθεί ένα ξαφνικό άλμα όταν μειωθεί το παράθυρο του προγράμματος περιήγησης.

Τα τελευταία μας παραδείγματα, τέσσερα και πέντε, προσθέτουν κανόνες @media, ώστε η εικόνα φόντου να μην είναι μικρότερη από 1024 X 768 pixel. Το Παράδειγμα πέμπτο δείχνει ότι αν ορίσουμε την ιδιότητα background-position σε αριστερά-κάτω αντί για κέντρο-κέντρο, μπορούμε να ελέγξουμε τον τρόπο με τον οποίο η εικόνα φόντου ευθυγραμμίζεται στο παράθυρο του προγράμματος περιήγησης.

Η τιμή της θέσης φόντου είναι αριστερά-κάτω.

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

Με φωτογραφίες στην ετικέτα imgΕίναι απλό: όταν ορίζετε το πλάτος ως ποσοστό, το ύψος θα κλιμακώνεται αυτόματα. Αυτή η μέθοδος δεν μπορεί να εφαρμοστεί σε εικόνες φόντου.

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

Ας υποθέσουμε ότι έχετε μια εικόνα φόντου 800 επί 450 pixel και θέλετε να την κάνετε φόντο με σταθερή αναλογία διαστάσεων 16:9. Ο παρακάτω κώδικας χρησιμοποιείται για εσοχή px, αλλά όλα θα λειτουργήσουν με em. Υπάρχει επίσης ένα στοιχείο σχήματος HTML5 για σωστή λειτουργίασε παλαιότερα προγράμματα περιήγησης μπορείτε να χρησιμοποιήσετε HTML5 shiv.

Div.column ( μέγ. πλάτος: 800 px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ )

Προσθήκη φόντου

Το στοιχείο που προκύπτει κλιμακώνεται όπως αναμένεται, αλλά αν προσθέσετε μια εικόνα φόντου, το αποτέλεσμα δεν θα είναι πολύ καλό. Χρησιμοποιώντας το χαρακτηριστικό Μέγεθος φόντου: εξώφυλλο. Δυστυχώς, αυτή η μέθοδος δεν λειτουργεί στον Internet Explorer 8. Για να λύσουμε αυτό το πρόβλημα, τοποθετούμε το φόντο χρησιμοποιώντας φόντο-θέση. Η εικόνα φόντου πρέπει να είναι τουλάχιστον τόσο πλάτος όσο μέγ. πλάτοςστοιχείο. Διαφορετικά, η εικόνα θα περικοπεί.

Div.column ( /* Η εικόνα φόντου πρέπει να έχει πλάτος 800 px */ max-width: 800 px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg: -moz-background-size: /* Firefox 3.6 */

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

Για παράδειγμα, μια εικόνα με πλάτος 800 επί 200 pixel (4:1). μικρή οθόνη, με πλάτος 300 pixel, θα πρέπει να μειωθεί στα 150 pixel (2:1). Ας μετρήσουμε τις ιδιότητες ύψοςΚαι padding-top:

Το σχήμα δείχνει την αναλογία διαστάσεων της εικόνας φόντου σε διαφορετικά πλάτη. Η κλίση του γραφήματος αντιστοιχεί στο χαρακτηριστικό padding-top, ύψος έναρξης - στο χαρακτηριστικό ύψος. Ο κωδικός που προκύπτει είναι:

Div.column ( /* Η εικόνα φόντου πρέπει να έχει πλάτος 800 px */ max-width: 800 px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120 px; /* start height */ background- εικόνα: url(http://voormedia.com/examples/amsterdam.jpg): εξώφυλλο -moz-background-size: cover; /8 */ )

Χρήση SCSS για υπολογισμό

Γνωρίσματα padding-topκαι ύψοςμπορεί να υπολογιστεί αυτόματα χρησιμοποιώντας προεπεξεργαστές όπως το SCSS. Ένα παράδειγμα αυτού:

/* Υπολογισμός αναλογίας ρευστού με βάση δύο διαστάσεις (πλάτος/ύψος) */ @mixin αναλογία υγρού ($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1 $height-large: nth($large-size, 2); / $width-large - $ύψος-μικρό - $slope * 100% -moz-background-size; ; /* Firefox 3.6 */ background-position: center /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Αυτό το στοιχείο θα έχει αναλογία ρευστού από 4:1 στα 800 px. */ @include fluid-ratio(800px 200px, 300px 150px: url(http://voormedia.com/examples/amsterdam.jpg);

Τεχνολογίες Ιστού, όπως διάφορα είδηΟι τάσεις του σχεδιασμού δεν μένουν ακίνητες, επομένως κάθε φορά εμφανίζονται ορισμένες πρωτότυπες δυνατότητες και αποχρώσεις για ιστότοπους. Μία από αυτές τις «κατευθύνσεις» είναι η χρήση φόντου (backgorund), το οποίο εκτείνεται σε ολόκληρη την οθόνη σε πλάτος και ύψος. Κάτι σαν πριν από περίπου ένα χρόνο ή περισσότερο που είπα - η εικόνα τοποθετήθηκε στην κεφαλίδα του ιστολογίου και "μεταφέρθηκε" ομαλά στην κύρια χρώμα φόντουιστοσελίδες. Εάν θέλετε, μπορείτε ακόμη και να προσθέσετε .

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

Στόχος αυτό το μάθηματοποθετήστε μια εικόνα φόντου στον ιστότοπο που θα καλύπτει συνεχώς ολόκληρο το φόντο του παραθύρου του προγράμματος περιήγησης. Τι ακριβώς πρέπει να γίνει:

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

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

Μια υπέροχη, απλή και προοδευτική λύση με χρήση CSS3

Για να ολοκληρώσουμε αυτήν την εργασία, μπορούμε να χρησιμοποιήσουμε την ιδιότητα background-size στο CSS3. Θα χρησιμοποιήσουμε ένα στοιχείο html που είναι καλύτερο από το σώμα. Ας ορίσουμε το φόντο να είναι σταθερό και κεντραρισμένο και, στη συνέχεια, να χρησιμοποιήσουμε το κάλυμμα τιμής στο μέγεθος φόντου.

html ( φόντο : url (images/bg.jpg ) μη επαναλαμβανόμενο κέντρο σταθερό ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size : κάλυμμα)

html ( φόντο: url(images/bg.jpg) μη επαναλαμβανόμενο κέντρο σταθερό; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: κάλυμμα)

Η λύση υποστηρίζεται από σχεδόν όλα τα δημοφιλή στο δίκτυο:

Firefox 3.6+ (το Firefox 4 υποστηρίζει έκδοση με πρόθεμα μη προμηθευτή)
Opera 10+ (Το Opera 9.5 υποστηρίζει μέγεθος φόντου αλλά χωρίς την τιμή εξωφύλλου)
Chrome Whatever+
IE 9+
Safari 3+

Κάποιος Goltzman βρήκε μια λύση που επιτρέπει στο hack να λειτουργήσει στον IE

filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ); -ms-φίλτρο:;

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")"

φίλτρο: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); Προσοχή όμως!!! Αυτό μπορεί να προκαλέσει κάποια προβλήματα με τους συνδέσμους στη σελίδα. Παρεμπιπτόντως, λίγο αργότερα ο Matt Litherland πρόσθεσε ότι ο κώδικας, κατ 'αρχήν, μπορεί να χρησιμοποιηθεί αλλά δεν μπορεί να χρησιμοποιηθεί για αυτόστοιχεία html

ή σώμα, αλλά πρέπει να εφαρμόσετε τα πάντα μέσω ενός div με 100% ύψος και πλάτος.CSS

- hack αριθμός 1 Μια εναλλακτική εκδοχή παρουσιάζει ο Doug Neiner. Σε αυτήν την περίπτωση, χρησιμοποιείται ένα στοιχείο που είναι ενσωματωμένο στη σελίδα

, το οποίο μπορεί να αλλάξει μέγεθος σε οποιοδήποτε πρόγραμμα περιήγησης. Ορίζουμε την τιμή min-height, η οποία γεμίζει κάθετα το παράθυρο του προγράμματος περιήγησης, και ορίζουμε το πλάτος στο 100%, το οποίο γεμίζει τη σελίδα οριζόντια. Ρυθμίσαμε επίσης το min-width έτσι ώστε η εικόνα να μην είναι ποτέ μικρότερη από ό,τι στην πραγματικότητα. img.bg (Ελάχιστο ύψος: 100%; ελάχ. πλάτος: 1024 px;/* Ρύθμιση αναλογικής κλίμακας */ πλάτος: 100%;ύψος: αυτόματο;

/* Ρύθμιση θέσης */ position : fixed ;

κορυφή: 0;

αριστερά: 0;
) Οθόνη @media και (μέγιστο πλάτος : 1024 εικονοστοιχεία ) (
/* Ειδικά για τη συγκεκριμένη εικόνα */

**ή σώμα, αλλά πρέπει να εφαρμόσετε τα πάντα μέσω ενός div με 100% ύψος και πλάτος.img.bg (αριστερά : 50% ; περιθώριο αριστερά : -512 εικονοστοιχεία ; /* 50% */ ) )**

img.bg ( /* Ορισμός κανόνων για την πλήρωση του φόντου */ ελάχ. ύψος: 100%, ελάχ. πλάτος: 1024 εικονοστοιχεία; /* Ρύθμιση ανάλογης κλίμακας */ πλάτος: 100%, ύψος: αυτόματο, /* Ρύθμιση θέσης */ Θέση: σταθερή κορυφή: 0, αριστερά: 0, οθόνη @media και (μέγιστο πλάτος: 1024 εικονοστοιχεία) ( /* Ειδικά για τη συγκεκριμένη εικόνα */ img.bg (αριστερά: 50%; περιθώριο αριστερά: -512 εικονοστοιχεία; / * 50% */ ) ) Λειτουργεί σε οποιαδήποτε έκδοση προγραμμάτων περιήγησης υψηλής ποιότητας - Safari / Opera / Firefox και Chrome. Όπως πάντα, το IE έχει τις δικές του αποχρώσεις: IE 9 - έργα?

IE 7/8 - τις περισσότερες φορές λειτουργεί σωστά, αλλά δεν κεντράρει εικόνες μικρότερες από το παράθυρο του προγράμματος περιήγησης.

IE 6 - μπορεί να προσαρμοστεί, αλλά ποιος χρειάζεται αυτό το πρόγραμμα περιήγησης ούτως ή άλλως.

-hack επιλογή 2

Μια άλλη επιλογή για την επίλυση του προβλήματος με χρησιμοποιώντας CSSστυλ είναι να τοποθετήσετε μια ενσωματωμένη εικόνα στη σελίδα με μια σταθερή θέση στην επάνω αριστερή γωνία και στη συνέχεια να ορίσετε το ελάχιστο πλάτος και το ελάχιστο ύψος στο 100% διατηρώντας τις αναλογίες.
#bg (θέση: σταθερό; επάνω: -50%; αριστερά: -50%; πλάτος: 200%; ύψος: 200%; ) #bg img (θέση: απόλυτη; επάνω: 0; αριστερά: 0; δεξιά: 0; κάτω : 0 ;
#bg ( θέση:σταθερή; επάνω:-50%; αριστερά:-50%; πλάτος:200%; ύψος:200%; ) #bg img (θέση:απόλυτη; επάνω:0; αριστερά:0; δεξιά:0; κάτω: 0, ελάχ. πλάτος: 50% )

Το hack λειτουργεί σε:

Safari / Chrome / Firefox (επίσης

πρώιμες εκδόσεις

δεν έχει δοκιμαστεί, αλλά λειτουργεί καλά στα πιο πρόσφατα)

#bg (θέση: σταθερό; επάνω: 0; αριστερά: 0; ) .bgπλάτος (πλάτος: 100%; ) .bgheight (ύψος: 100%; )

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() ( var theWindow = $(παράθυρο), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); συνάρτηση resizeBg() ( if ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Κατά τη γνώμη μου, κεντράρισμα δεν γίνεται σε αυτή την περίπτωση (από όσο καταλαβαίνω), αλλά μπορεί να γίνει. Τα περισσότερα προγράμματα περιήγησης για υπολογιστές υποστηρίζονται, συμπεριλαμβανομένου του IE7+. Τέλος, ο συγγραφέας του άρθρου σχετικά με τις αμυχές ετοίμασε ένα σύνολο παραδειγμάτων αρχείων στα οποία υλοποιούνται όλα αυτά - μπορείτε να το κατεβάσετε. Τα σχόλια στο αρχικό άρθρο περιέχουν επίσης κάποιες πληροφορίες και συζήτηση, αν και τα περισσότερα σημαντικές λεπτομέρειεςο συγγραφέας πρόσθεσε με τη μορφή ορθοστατών στην ανάρτηση και τους έχω επίσης μεταφραστεί και υποδειχθεί. Φυσικά, τα παραδείγματα θα σας βοηθήσουν να καταλάβετε όλα αυτά. Γενικά, αν δεν υπήρχαν τα συνεχή «gags» από τον IE7, όλα τα αναφερόμενα hacks θα ήταν ιδανικά.

P.S. Θέλετε να αγοράσετε ένα βιβλίο; - δεν χρειάζεται να πάτε στο κατάστημα γιατί τώρα ένα ηλεκτρονικό βιβλιοπωλείο σάς επιτρέπει να κάνετε τα πάντα online - επιλέξτε, πληρώστε και κανονίστε την παράδοση στο σπίτι.