103 of 313 menu

Właściwość mask

Właściwość mask jest skrótem dla wszystkich właściwości maskowania i pozwala ustawić: obraz-maskę, jej położenie, rozmiar, tryb mieszania i inne parametry.

Jest właściwością-skrótem dla następujących właściwości: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Składnia

selektor {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Wartości

Wartość	Opis
`none`	Wyłącza maskowanie (wartość domyślna)
`url()`	Ścieżka do obrazu-maski (SVG, PNG)
`linear-gradient()`	Gradient liniowy jako maska
`radial-gradient()`	Gradient promieniowy jako maska
`position`	Położenie maski (top, center, 50% 50% i inne)
`size`	Rozmiar maski (cover, contain, 100px 50px)
`repeat`	Powtarzanie maski (no-repeat, repeat-x, space)
`mode`	Tryb mieszania (alpha, luminance, match-source)
`composite`	Kompozycja masek (add, subtract, intersect, exclude)

Przygotowanie obrazków

Załóżmy, że mamy obrazek natury, który będziemy przycinać, oraz SVG obrazki serduszka i strzałki, według których będziemy wycinać:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Przykład . Maska-obrazek

Nałóżmy maskę-serduszko na nasz obrazek:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Przykład . Pozycja maski

Maska-serduszko w lewym górnym rogu:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Przykład . Pozycja maski

Maska-serduszko w prawym dolnym rogu:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Przykład . Pozycja maski

Maska-serduszko po lewej stronie na środku:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Przykład . Pozycja maski

Maska-serduszko na środku:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Przykład . Pozycja maski

Maska-serduszko 100px od lewej i 200px od góry:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Przykład . Rozmiar maski cover

Wartość cover skaluje maskę, aby całkowicie pokryła element, zachowując proporcje. Może przyciąć krawędzie maski, jeśli proporcje nie pasują:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Przykład . Rozmiar maski contain

Wartość contain skaluje maskę, aby cała zmieściła się w elemencie, zachowując proporcje. Może pozostawiać puste obszary:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Przykład . Rozmiar maski

Stały rozmiar ustawia dokładne wymiary maski. Na przykład zróbmy maskę o rozmiarze 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Przykład . Powtarzanie no-repeat

Wartość no-repeat wyłącza powtarzanie maski. Maska wyświetla się tylko raz w określonej pozycji:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Przykład . Powtarzanie repeat-x

Wartość repeat-x powtarza maskę tylko wzdłuż osi poziomej:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Przykład . Kompozycja add

Wartość add dodaje kilka masek (wynik - połączenie wszystkich masek):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Przykład . Kompozycja intersect

Wartość intersect pokazuje tylko obszar przecięcia masek:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Przykład . Kompozycja exclude

Wartość exclude pokazuje obszary masek, które nie przecinają się:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Przykład . Kompozycja subtract

Wartość subtract odejmuje drugą maskę od pierwszej. Dla przykładu zróbmy jedno serduszko i odejmijmy od niego strzałkę:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Przykład . Rozwinięty zapis mask

Właściwość mask, zapisana oddzielnymi składnikami:

<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;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Przykład . SVG dla obrazka

Użycie elementu SVG jako maski dla obrazka:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Przykład . SVG dla gradientu

Użycie elementu SVG jako maski dla gradientu:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Zobacz też

właściwość mask-position,
określa położenie maski względem elementu
właściwość mask-image,
ustawia obraz dla maski
właściwość mask-mode,
określa jak maska oddziałuje z tłem
właściwość mask-size,
określa rozmiar maski
właściwość mask-repeat,
określa powtarzanie maski
właściwość mask-origin,
określa obszar pozycjonowania maski
właściwość mask-clip,
określa obszar przycięcia maski
właściwość mask-composite,
określa jak kilka masek jest łączonych

↑

Polski▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Wykorzystujemy pliki cookie do działania strony, analizy i personalizacji. Przetwarzanie danych odbywa się zgodnie z Polityką prywatności.

zaakceptuj wszystkie dostosuj odrzuć