НОВИНКА!
Занимательная математика от Трепачёва. Присоединяйтесь к нам!

103 of 313 menu

Свойство mask

Свойство mask является сокращением для всех свойств маскирования и позволяет задать: изображение-маску, её положение, размер, режим наложения и другие параметры.

Является свойством-сокращением для следующих свойств: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Синтаксис

селектор {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Значения

Значение	Описание
`none`	Отключает маскирование (значение по умолчанию)
`url()`	Путь к изображению-маске (SVG, PNG)
`linear-gradient()`	Линейный градиент в качестве маски
`radial-gradient()`	Радиальный градиент в качестве маски
`position`	Положение маски (top, center, 50% 50% и др.)
`size`	Размер маски (cover, contain, 100px 50px)
`repeat`	Повторение маски (no-repeat, repeat-x, space)
`mode`	Режим наложения (alpha, luminance, match-source)
`composite`	Композиция масок (add, subtract, intersect, exclude)

Подготовка картинок

Пусть у нас есть картинка природы, которую мы будем образать, и SVG картинки сердечка и стрелки, по которым мы будем вырезать:

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

:

Пример . Маска-картинка

Давайте наложим маску-сердечко на нашу картинку:

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

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

:

Пример . Позиция маски

Маска-сердечко в левом верхнем углу:

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

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

:

Пример . Позиция маски

Маска-сердечко в правом нижнем углу:

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

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

:

Пример . Позиция маски

Маска-сердечко в по центру слева:

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

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

:

Пример . Позиция маски

Маска-сердечко в по центру:

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

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

:

Пример . Позиция маски

Маска-сердечко 100px слева и 200px сверху:

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

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

:

Пример . Размер маски cover

Значение cover масштабирует маску, чтобы она полностью покрыла элемент, сохраняя пропорции. Может обрезать края маски, если пропорции не совпадают:

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

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

:

Пример . Размер маски contain

Значение contain масштабирует маску, чтобы она целиком поместилась в элемент, сохраняя пропорции. Может оставлять пустые области:

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

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

:

Пример . Размер маски

Фиксированный размер устанавливает точные размеры маски. К примеру сделаем маску размером 50px:

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

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

:

Пример . Повторение no-repeat

Значение no-repeat отключает повторение маски. Маска отображается только один раз в указанной позиции:

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

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

:

Пример . Повторение repeat-x

Значение repeat-x повторяет маску только по горизонтальной оси:

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

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

:

Пример . Композиция add

Значение add складывает несколько масок (результат - объединение всех масок):

<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;
}

:

Пример . Композиция intersect

Значение intersect показывает только область пересечения масок:

<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;
}

:

Пример . Композиция exclude

Значение exclude показывает области масок, которые не пересекаются:

<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;
}

:

Пример . Композиция subtract

Значение subtract вычитает вторую маску из первой. Для примера сделаем одно сердечко и вычтем из него стрелку:

<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;
}

:

Пример . Развернутая запись mask

Свойство mask, записанное отдельными составляющими:

<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;
}

:

Пример . SVG для картинки

Использование SVG-элемента в качестве маски для картинки:

<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);
}

:

Пример . SVG для градиента

Использование SVG-элемента в качестве маски для градиента:

<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);
}

:

Смотрите также

свойство mask-position,
определяет положение маски относительно элемента
свойство mask-image,
задает изображение для маски
свойство mask-mode,
определяет как маска взаимодействует с фоном
свойство mask-size,
определяет размер маски
свойство mask-repeat,
определяет повторение маски
свойство mask-origin,
определяет область позиционирования маски
свойство mask-clip,
определяет область отсечения маски
свойство mask-composite,
определяет как несколько масок комбинируются

↑

Русский▼

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

Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.

принять все настроить отклонить