Ιστορικό-συνημμένο - CSS-Κόλπα

Η background-attachmentιδιότητα στο CSS καθορίζει τον τρόπο μετακίνησης του φόντου σε σχέση με τη θύρα προβολής.

Υπάρχουν τρεις τιμές: scroll, fixedκαι local. Ο καλύτερος τρόπος για να το εξηγήσετε αυτό είναι μέσω επίδειξης (δοκιμάστε να κάνετε κύλιση στα μεμονωμένα υπόβαθρα):

Δείτε την επίδειξη συνημμένων Pen Background του Timothy Miller (@tjacobdesign) στο CodePen.

Υπάρχουν δύο διαφορετικές προβολές που πρέπει να σκεφτείτε όταν μιλάτε background-attachment: η κύρια προβολή (παράθυρο προγράμματος περιήγησης) και η τοπική προβολή (μπορείτε να το δείτε στο παραπάνω demo)

scrollείναι η προεπιλεγμένη τιμή. Κάνει κύλιση με την κύρια προβολή, αλλά παραμένει σταθερή μέσα στην τοπική προβολή.

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

localεφευρέθηκε επειδή η προεπιλεγμένη scrollτιμή ενεργεί σαν ένα σταθερό φόντο. Κάνει κύλιση τόσο με την κύρια όσο και με την τοπική. Υπάρχουν μερικά πολύ ωραία πράγματα που μπορείτε να κάνετε με αυτό.

Σχετιζομαι με

φόντο-κλιπ
χρώμα του φόντου
εικόνα φόντου
φόντο-προέλευση
φόντο-θέση
επανάληψη φόντου
μέγεθος φόντου

Περισσότεροι πόροι

Προδιαγραφές CSS3
MDN

Υποστήριξη προγράμματος περιήγησης

Οι τιμές fixedκαι οι scrollτιμές υποστηρίζονται παντού, αν και fixedμπορούν να συμπεριφέρονται παράξενα σε κινητά. localέχει αυτήν την υποστήριξη προγράμματος περιήγησης:

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