Pozycja maski - CSS-Tricks

Anonim

W CSS mask-positionwłaściwość określa początkowe położenie obrazu warstwy maski względem obszaru pozycji maski. Działa jak background-positionwłasność.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

Maskowanie umożliwia wyświetlenie wybranych fragmentów elementu podczas ukrycia pozostałych. W poniższym demo możesz zmienić położenie obrazu warstwy maskującej:

Składnia

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Wartość początkowa: 0% 0%
  • Dotyczy: wszystkich elementów. W SVG dotyczy elementów kontenera z wyłączeniem elementu, wszystkich elementów graficznych i elementu.
  • Odziedziczone: nie
  • Wartość obliczona: składająca się z: dwóch słów kluczowych reprezentujących pochodzenie i dwóch przesunięć z tego źródła, każdy podany jako długość bezwzględna (jeśli podano a ), w przeciwnym razie jako procent.
  • Typ animacji: lista powtarzalna

Wartości

Można określić w kategoriach offsetowych słów kluczowych ( top, left, bottom, right, i center), procenty i wartości dotyczące długości krawędzi elementu, podobnie jak CSS background-positionnieruchomości.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Definicje wartości

  • : Każda ważna długość CSS (takich jak px, em, remi %, między innymi), które będą określać, jak daleko krawędź obrazu maski jest od odpowiedniej krawędzi elementu.
  • : Określa pozycję obrazu maski jako wartość procentową względem obszaru pozycjonowania maski minus rozmiar obrazu maski.
  • top: Odpowiednik 0% dla pozycji pionowej.
  • right: Odpowiednik 100% dla pozycji poziomej.
  • bottom: Odpowiednik 100% dla pozycji pionowej.
  • left: Odpowiednik 0% dla pozycji poziomej.
  • center: Odpowiednik 50% dla pozycji poziomej, jeśli nie określono inaczej, lub 50% dla pozycji pionowej, jeśli tak jest.
  • initial: Stosuje domyślne ustawienie właściwości, które wynosi 0% 0%.
  • inherit: Przyjmuje mask-positionwartość rodzica.
  • unset: Usuwa prąd mask-positionz elementu.

Używanie wielu wartości

Ta właściwość może przyjmować listę wartości oddzielonych przecinkami dla pozycji maski, a każda wartość jest stosowana do odpowiedniego obrazu warstwy maski określonego we mask-imagewłaściwości. W poniższym przykładzie pierwsza wartość określa położenie pierwszego obrazu, druga wartość określa położenie drugiego obrazu i tak dalej.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Inna składnia

mask-position może przyjąć jedną, dwie, trzy lub cztery wartości, aby określić położenie warstwy maski w poziomie i w pionie.

Pojedyncza wartość

W przypadku ustawienia pojedynczej wartości , przyjmuje się ją jako wartość poziomą i przyjmuje się, że jest to wartość pionowa center.

mask-position: 100px; /* 100px center */
Dwie wartości

W przypadku używania wartości par, pierwsza jest przyjmowana jako wartość pozioma, a druga określa położenie warstwy roboczej w pionie.

mask-position: 10% 50%; /* x=10%, Y=50% */

Jeśli obie wartości są słowami kluczowymi, kolejność słów kluczowych nie ma znaczenia:

mask-position: top left; /* = left top */

Ale kiedy mamy kombinację słowa kluczowego i długości lub wartości procentowej, kolejność ma znaczenie, a pierwsza wartość zawsze odpowiada przesunięciu poziomemu. W związku z tym:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Trzy wartości

Jeżeli podano trzy wartości, przyjmuje się, że brakujące przesunięcie wynosi zero:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Cztery wartości

Składnia składająca się z czterech wartości pozwala określić, po których stronach elementu umieszczana jest maska ​​(wartości 1 i 3), a następnie odległość od tych stron (wartości 2 i 4).

Tak więc, jeśli chcesz umieścić maskę 100 pikseli od dołu elementu i 200 pikseli od prawej, możesz wykonać następujące czynności:

mask-position: bottom 100px right 200px;

Animowanie masek

Możliwe jest animowanie pozycji maski i mask-sizeużycie animacji klatek kluczowych i przejścia CSS, jak poniżej:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

W tym następnym demo animujemy pozycję warstwy maski za pomocą animacji klatki kluczowej:

Próbny

Zmień wartość dla mask-positionw następującym demo:

Wsparcie przeglądarki

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Źródło: caniuse

Więcej informacji

  • Moduł maskowania CSS, poziom 1 (wersja robocza redakcji)
  • Obcinanie i maskowanie w CSS
  • Obcinanie a maskowanie: kiedy używać każdego
  • # 185: Zabawa z maskami CSS (wideo)