CSS mask-position ιδιότητα

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

mask-position Η ρύθμιση αυτής της ιδιότητας ορίζει τη θέση της εικόνας της μάσκας (σχετικά με την περιοχή της θέσης της μάσκας).

Σημείωση:Προεπιλεγμένα, η εικόνα της μάσκας τοποθετείται στο πάνω αριστερό σημείο του στοιχείου και επαναλαμβάνεται σε κάθετη και οριζόντια κατεύθυνση.

Παράδειγμα

Παράδειγμα 1

Θέστε τη θέση της εικόνας της μάσκας στο κέντρο:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Προσπάθησε το δικό σου

Παράδειγμα 2

Θέστε τη θέση της εικόνας της μάσκας στο κάτω δεξί σημείο:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

Προσπάθησε το δικό σου

Γλωσσή Κάσσης

mask-position: value;

Τιμή Ιδιότητας

Τιμή Περιγραφή
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 Αν δοθεί μόνο μια λέξη-κλειδί, η άλλη τιμή θα είναι "center".
x% y%

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη τιμή είναι η κάθετη θέση.

Το πάνω αριστερό σημείο είναι 0% 0%. Το κάτω δεξί σημείο είναι 100% 100%.

Αν δοθεί μόνο μια τιμή, η άλλη τιμή θα είναι 50%.

Η προεπιλεγμένη τιμή είναι 0% 0%
xpos ypos

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη τιμή είναι η κάθετη θέση.

Το πάνω αριστερό σημείο είναι 0 0. Οι μονάδες μπορούν να είναι piksέλ (0px 0px) ή οποιαδήποτε άλλη μονάδα Κάσσης.

Αν δοθεί μόνο μια τιμή, η άλλη τιμή θα είναι 50%.

Μπορούν να χρησιμοποιηθούν τα % και τις θέσεις ταυτόχρονα.
initial Η τιμή αυτής της ιδιότητας ορίζεται στην προεπιλεγμένη της τιμή. Δείτε initial。
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε inherit。

Τεχνικά Στοιχεία

Προεπιλεγμένη τιμή: 0% 0%
Κληρονομικότητα: Όχι
Δημιουργία Αニματογράφου: Μη υποστηριζόμενο. Δείτε επίσης:Παράμετροι Αニματογράφου。
Έκδοση: Μόδος Μάσκας Κάσσης Ρύθμισης Του 1ου Επίπεδου
Γλωσσή Γιουάσκρεπτοσ: object.style.maskPosition="100px center"

Υποστήριξη περιηγητή

Τα αριθμήματα στην τάβλη δείχνουν την έκδοση του πρώτου περιηγητή που υποστηρίζει την ιδιότητα.

Χρωμῶ Ετζ Φαίρεξ Σαφάρι Ἄοπερα
120 120 53 15.4 106

Σχετικές σελίδες

Εκμάθηση:Καλύμμα CSS

Αναφορά:CSS mask ιδιότητα

Αναφορά:CSS mask-clip ιδιότητα

Αναφορά:CSS mask-composite ιδιότητα

Αναφορά:CSS mask-image ιδιότητα

Αναφορά:CSS mask-mode ιδιότητα

Αναφορά:CSS mask-origin ιδιότητα

Αναφορά:CSS mask-repeat ιδιότητα

Αναφορά:CSS mask-size ιδιότητα

Αναφορά:CSS mask-type ιδιότητα