Σύμβολο background-position-x CSS

Ορισμός και χρήση

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.

  • xpos Ρύθμιση ως αριστερά ή δεξιά
  • offset Η απόσταση από την αριστερή πλευρά της εικόνας του παραδείγματος είναι η απόσταση από το αριστερό ή το δεξί μέρος της εικόνας.

Η μονάδα μπορεί να είναι εικονοστοιχεία ή άλλες Μονάδες 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 ιδιότητα