Σύμβολο background-position-x CSS
- προηγούμενη σελίδα background-position
- Επόμενη σελίδα background-position-y
Ορισμός και χρήση
background-position-x
Ορισμός της θέσης της εικόνας φόντου στον άξονα x.
Συμβουλή:By default, the background image is placed at the top left corner of the element and is repeated vertically and horizontally.
Παράδειγμα
Παράδειγμα 1
Πώς να τοποθετήσετε την εικόνα φόντου στον άξονα x:
div { background-image: url('w3css.gif'); background-repeat: no-repeat; background-position-x: center; }
Παράδειγμα 2
Πώς να τοποθετήσετε την εικόνα φόντου στα δεξιά:
body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-position-x: right; }
Παράδειγμα 3
Πώς να χρησιμοποιήσετε την τοποθέτηση φόντου σε ποσοστό:
body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-position-x: 50%; }
Παράδειγμα 4
Πώς να χρησιμοποιήσετε την τοποθέτηση φόντου σε pixel:
body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-position-x: 150px; }
Παράδειγμα 5
Δημιουργία μιας επικάλυψης εικόνας φόντου με διαφορετικές ιδιότητες φόντου:
.hero-image { background-image: url("photographer.jpg"); /* Χρήση εικόνας */ background-color: #cccccc; /* Χρήση αυτής της απόχρωσης αν η εικόνα δεν είναι διαθέσιμη */ height: 300px; /* Δεν απαιτείται να οριστεί η ύψος */ background-position-x: center; /* Κεντρωση της εικόνας */ background-repeat: no-repeat; /* Δεν επαναλαμβάνεται η εικόνα */ background-size: cover; /* Επικαλυψη του μεγέθους της εικόνας για να καλύπτει ολόκληρο τον κουτί */ }
Γλώσσα γραμματικής CSS
background-position-x: value;
Τιμή ιδιότητας
Τιμή | Περιγραφή |
---|---|
left | Τοποθέτηση της εικόνας στο αριστερό μέρος του άξονα Χ. |
right | Τοποθέτηση της εικόνας στο δεξί μέρος του άξονα Χ. |
center | Τοποθέτηση της εικόνας στο κέντρο του άξονα Χ. |
x% |
Το αριστερό μέρος του άξονα Χ είναι 0%,το δεξί μέρος είναι 100%. Η ποσοστιαία τιμή υποδεικνύει το πλάτος της περιοχής τοποθέτησης της εικόνας αφαιρώντας το πλάτος της εικόνας. |
xpos | Η απόσταση από την αριστερή πλευρά είναι η απόσταση από την αριστερή πλευρά της περιοχής τοποθέτησης της εικόνας αφαιρώντας το μέγεθος της εικόνας. Μονάδες CSS. |
xpos offset |
δυαδική γλώσσα γραμματικής, υποστηριζόμενη μόνο από Firefox και Safari.
Η μονάδα μπορεί να είναι εικονοστοιχεία ή άλλες Μονάδες CSS. |
initial | Ρύθμιση αυτής της ιδιότητας στην προεπιλεγμένη τιμή. Δείτε: initial. |
inherit | Εκκαθάρισμα αυτής της ιδιότητας από τον γονικό στοιχείο. Δείτε: inherit. |
Τεχνικά λεπτομέρειες
Προεπιλεγμένη τιμή: | 0% |
---|---|
Επιληπτικότητα: | Όχι |
Παραγωγή αニμασίας: | Υποστηρίζεται. Δείτε:Ιδιότητες σχετικές με την αニμασία. |
Έκδοση: | CSS3 |
Γλώσσα γραμματικής JavaScript: | object.style.backgroundPositionX="center" |
Υποστήριξη περιηγητή
Τα αριθμήματα στη διάταξη υποδεικνύουν την έκδοση του περιηγητή που υποστηρίζει πλήρως αυτήν την ιδιότητα.
Chrome | Edge | Firefox | Safari | Opera | |
---|---|---|---|---|---|
μονοθέτική γλώσσα γραμματικής | 1.0 | 12.0 | 49.0 | 1.0 | 15.0 |
δυαδική γλώσσα γραμματικής | μη υποστηριζόμενο | μη υποστηριζόμενο | 49.0 | 15.4 | μη υποστηριζόμενο |
σχετικές σελίδες
Εκμάθηση:CSS background
CSS αναφοράς:background-image ιδιότητα
CSS αναφοράς:background-position ιδιότητα
CSS αναφοράς:background-position-y ιδιότητα
HTML DOM αναφοράς:backgroundPosition ιδιότητα
- προηγούμενη σελίδα background-position
- Επόμενη σελίδα background-position-y