Ιδιότητα mask-size
Η ιδιότητα mask-size ορίζει το μέγεθος της εικόνας μάσκας. Μπορείτε να ορίσετε συγκεκριμένα μεγέθη σε pixels/ποσοστά ή να χρησιμοποιήσετε τις λέξεις-κλειδί cover και contain.
Σύνταξη
επιλογέας {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
auto |
Το αρχικό μέγεθος της εικόνας (προεπιλογή). |
cover |
Κλιμακώνει τη μάσκα διατηρώντας τις αναλογίες, ώστε να καλύψει πλήρως το στοιχείο. |
contain |
Κλιμακώνει τη μάσκα διατηρώντας τις αναλογίες, ώστε να χωράει πλήρως μέσα στο στοιχείο. |
100px 50px |
Συγκεκριμένα μεγέθη σε pixels. |
50% 100% |
Μεγέθη σε ποσοστά των διαστάσεων του στοιχείου. |
Παράδειγμα . Μέγεθος cover
Η μάσκα κλιμακώνεται για να καλύψει πλήρως το στοιχείο:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Παράδειγμα . Μέγεθος contain
Η μάσκα κλιμακώνεται για να χωρέσει πλήρως μέσα στο στοιχείο:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Παράδειγμα . Σταθερό μέγεθος σε pixels
Μάσκα μεγέθους 150×150 pixels:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Παράδειγμα . Μέγεθος σε ποσοστά
Η μάσκα καταλαμβάνει το 80% του πλάτους και το 60% του ύψους του στοιχείου:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Παράδειγμα . Διαφορετικά μεγέθη στους άξονες
Μάσκα 200px σε πλάτος και 100px σε ύψος:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Δείτε επίσης
-
ιδιότητα
mask-position,
ορίζει τη θέση της μάσκας -
ιδιότητα
mask-repeat,
ορίζει την επανάληψη της μάσκας -
ιδιότητα
mask,
συντόμευση για όλες τις ιδιότητες μάσκας
