CSS mask-position Właściwość
Przykład
Ustaw położenie obrazu warstwy maski na środek:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość mask-position
określa pozycję początkową obrazu maski (w stosunku do obszaru pozycji maski).
Porada: Domyślnie obraz maski jest umieszczany w lewym górnym rogu elementu i powtarzany zarówno w pionie, jak iw poziomie.
Domyślna wartość: | 0% 0% |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.maskPosition="100px środek" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
mask-position | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Składnia CSS
mask-position: value;
Wartości nieruchomości
Value | Description |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be "center" |
x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% |
xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Ustaw pozycję obrazu warstwy maski w prawym dolnym rogu:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%;
mask-position: 100% 100%;
}
Powiązane strony
Odniesienie CSS: właściwość mask-image
Dokumentacja CSS: właściwość mask-mode
Dokumentacja CSS: właściwość mask-origin
Odniesienie CSS: właściwość mask-repeat
Dokumentacja CSS: właściwość rozmiaru maski
Samouczek CSS: Maskowanie CSS