Rozmiar maski - CSS-Tricks

W CSS właściwość mask-size określa rozmiar obrazu warstwy maski. Pod wieloma względami działa bardzo podobnie do background-sizenieruchomości.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Maskowanie umożliwia wyświetlenie wybranych fragmentów elementu podczas ukrycia pozostałych. Rozmiar maski jest określony przez mask-sizewłaściwość.

W poniższym demo możesz pobawić się rozmiarem obrazu warstwy maski:

Składnia

mask-size: = ( = | | auto )(1,2) | cover | contain

• Wartość początkowa: auto
• Dotyczy: wszystkich elementów. W SVG dotyczy to elementów kontenera z wyłączeniem elementu, wszystkich elementów graficznych i elementu
• Odziedziczone: nie
• Typ animacji: lista powtarzalna

Oznacza to po prostu, że składnia akceptuje wartość rozmiaru tła ( ), która może mieć jedną lub dwie długości i / lub procenty ( ), ustawić na autolub jedno z dwóch słów kluczowych ( coveri contain).

• Gdy używane są dwie wartości , pierwsza wartość określa szerokość obrazu maski, a druga wartość określa jego wysokość .
• Kiedy używana jest jedna wartość, która nie zawiera ani nie pokrywa, określa szerokość obrazu maski i przyjmuje się, że jest to wysokość auto.

Wartości

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Definicje wartości

• : Każda ważna i nieujemna długość CSS, takie jak px, em, remi %, między innymi.
• : Określa rozmiar obrazu warstwy maski jako wartość procentową w stosunku do obszaru pozycjonowania maski, który jest ustawiany przez wartość mask-origin. Domyślnie ta wartość to border-box, co oznacza, że ​​zawiera obramowanie, wypełnienie i zawartość pola.
• auto: Używana jest wewnętrzna wysokość i szerokość obrazu maski, aw przypadku obrazów takich jak gradienty, które nie mają wewnętrznych wymiarów, jest ona renderowana w rozmiarze obszaru pozycjonowania maski.
• contain: Skaluje obraz maski, zachowując jego wewnętrzne proporcje w taki sposób, że zarówno jego szerokość, jak i wysokość można dopasować do obszaru umiejscowienia maski. W przypadku obrazów takich jak gradienty, które nie mają wewnętrznych wymiarów, jest renderowany w rozmiarze obszaru pozycjonowania maski.
• cover: Skaluje obraz maski, zachowując jego wewnętrzne proporcje w taki sposób, że zarówno jego szerokość, jak i wysokość mogą całkowicie pokryć obszar umiejscowienia maski. W przypadku obrazów takich jak gradienty, które nie mają wewnętrznych wymiarów, jest renderowany w rozmiarze obszaru pozycjonowania maski.
• initial: Stosuje domyślne ustawienie właściwości, czyli auto.
• inherit: Przyjmuje wartość rozmiaru maski rodzica.
• unset: Usuwa prąd mask-sizez elementu.

Używanie wielu wartości

Ta właściwość może przyjmować listę wartości oddzielonych przecinkami dla rozmiarów masek, 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 rozmiar pierwszego obrazu, druga wartość określa rozmiar drugiego obrazu i tak dalej.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

autowartość

Jeśli wartość mask-sizewłaściwości jest określona jako auto, na przykład:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Następnie obraz maski skaluje się w odpowiednich kierunkach, aby zachować proporcje. To powiedziawszy, możemy uzyskać różne wyniki w zależności od wewnętrznych wymiarów i proporcji obrazu.

Proporcja / wymiar	Brak wewnętrznych wymiarów	Jeden wewnętrzny wymiar	Oba wewnętrzne wymiary
Ma proporcje	Renderowane tak, jakby zamiast tego określono zawartość	Renderowane w rozmiarze określonym przez ten jeden wymiar i proporcje	Renderowane w tym rozmiarze
Brak proporcji	Renderowane w rozmiarze obszaru pozycjonowania maski	Renderowane przy użyciu wewnętrznego wymiaru i odpowiedniego wymiaru obszaru pozycjonowania maski	Nie dotyczy

Jeśli wartość mask-sizejest określona za pomocą autoi inną wartością inną niż auto, na przykład:

.element ( mask-size: auto 200px; )

… następnie:

• jeśli obraz ma wewnętrzną proporcję , wartość auto jest obliczana przy użyciu określonego wymiaru i wewnętrznej proporcji.
• jeśli obraz nie ma wewnętrznej proporcji , wartość auto staje się odpowiednim wewnętrznym wymiarem obrazu, jeśli istnieje, a jeśli tak nie jest, wartość auto będzie odpowiednim wymiarem obszaru pozycjonowania maski.

Zrozumienie covericontain

Poniższy film wyjaśnia, jak działają słowa kluczowe zawierające i pokrywające. Zwróć uwagę, że początkowe położenie warstwy maski znajduje się na środku obszaru pozycjonowania:

Jeśli obraz nie ma wewnętrznego współczynnika proporcji, określenie okładki lub zawartości powoduje renderowanie obrazu maski w rozmiarze obszaru umiejscowienia maski.

I czym do cholery jest wewnętrzny wymiar i nieodłączna proporcja?

Wewnętrzne wymiary to szerokość i wysokość elementu, a wewnętrzna proporcja to ich stosunek.

• Obraz bitmapowy, taki jak format PNG, zawsze ma wewnętrzne wymiary i nieodłączne proporcje.
• Obraz wektorowy, taki jak format SVG, może mieć oba wewnętrzne wymiary. Dlatego ma również wewnętrzną proporcję. Może również mieć jeden wymiar wewnętrzny lub nie mieć go wcale, aw każdym przypadku może mieć lub nie mieć wewnętrznej proporcji.
• Gradienty są jak obrazy bez wewnętrznych wymiarów ani wewnętrznych proporcji.

Wsparcie przeglądarki

TO ZNACZY	Brzeg	Firefox	Chrom	Safari	Opera
Nie	18+	53+	Wszystko	4+	70

Android Chrome	Android Firefox	Przeglądarka Android	iOS Safari	Opera Mini
85+	79+	4.4+	Wszystko	Wszystko

Próbny

Poniższe demo używa długości dla rozmiaru maski. Spróbuj zmienić wartość na inne typy wartości w kodzie i sprawdź wynik.

Więcej informacji

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