С помощью CSS маскировки вы создаете слой-маску для размещения поверх элемента, чтобы частично или полностью скрыть часть элемента.
CSS Свойство mask-image
CSS Свойство mask-image задает изображение слоя маски.
Изображение слоя маски может быть изображением в формате PNG, SVG-изображением, в CSS градиент, или в SVG <mask> элемент.
Поддержка браузера
Примечание: Большинство браузеров имеют лишь частичную поддержку CSS-маскировки. Вам нужно будет использовать префикс -webkit- в дополнение к стандартному свойству в большинстве браузеров.
Цифры в таблице ниже указывают первую версию браузера, которая полностью поддерживает это свойство. Цифры, за которыми следует -webkit - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Используйте изображение в качестве слоя-маски
Чтобы использовать изображение в формате PNG или SVG в качестве слоя маски, используйте значение url() для передачи в изображении слоя маски.
Изображение маски должно иметь прозрачную или полупрозрачную область. Черный цвет означает полную прозрачность.
Вот изображение маски (изображение в формате PNG), которое мы будем использовать:
Вот изображение из Чинкве-Терре, в Италии:
Теперь мы применяем изображение маски (изображение в формате PNG выше) в качестве слоя маски для изображения из Чинкве-Терре, Италия:
Вот исходный код:
.mask1 {
-webkit-mask-image: url(sw3logo.png);
mask-image:
url(sw3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Попробуйте сами »
Объясненный пример
Свойство mask-image свойство определяет изображение, которое будет использоваться в качестве слоя-маски для элемента.
Свойство mask-repeat указывает, будет ли повторяться изображение маски или каким образом. Значение no-repeat указывает, что изображение маски не будет повторяться (изображение маски будет показано только один раз).
Другой пример
Если мы опустим свойство mask-repeat, изображение маски будет повторяться по всему изображению из Чинкве-Терре, Италия:
Вот исходный код:
.mask1 {
-webkit-mask-image: url(sw3logo.png);
mask-image:
url(sw3logo.png);
}
Попробуйте сами »
Используйте градиенты в качестве слоя-маски
Линейные и радиальные градиенты CSS также можно использовать в качестве изображений-масок.
Примеры линейного градиента
Здесь мы используем линейный градиент в качестве слоя-маски для нашего изображения. Этот линейный градиент идет сверху (черный) вниз (прозрачный):
Используйте линейный градиент в качестве слоя-маски:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Попробуйте сами »
Здесь мы используем линейный градиент вместе с текстовой маскировкой в качестве слоя-маски для нашего изображения:
Чинкве-Терре - прибрежный район в Лигурии, на северо-западе Италии. Он расположен на западе провинции Специя и включает в себя пять деревень: Монтероссо-аль-Маре, Вернацца, Корнилья, Манарола и Риомаджоре.
Чинкве-Терре - прибрежный район в Лигурии, на северо-западе Италии. Он расположен на западе провинции Специя и включает в себя пять деревень: Монтероссо-аль-Маре, Вернацца, Корнилья, Манарола и Риомаджоре.
Чинкве-Терре - прибрежный район в Лигурии, на северо-западе Италии. Он расположен на западе провинции Специя и включает в себя пять деревень: Монтероссо-аль-Маре, Вернацца, Корнилья, Манарола и Риомаджоре.
Используйте линейный градиент вместе с маскировкой текста в качестве слоя-маски:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Попробуйте сами »
Примеры радиального градиента
Здесь мы используем радиальный градиент (в форме круга) в качестве слоя-маски для нашего изображения:
Используйте радиальный градиент в качестве слоя-маски (круг):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Попробуйте сами »
Здесь мы используем радиальный градиент (в форме эллипса) в качестве слоя-маски для нашего изображения:
Используйте другой радиальный градиент в качестве слоя-маски (эллипс):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5) 50%);
}
Попробуйте сами »
Используйте SVG в качестве слоя-маски
Элемент SVG <mask> может использоваться внутри SVG-графики для создания эффектов маскировки.
Здесь мы используем элемент SVG <mask> для создания различных слоев маски для нашего изображения:
Слой маски SVG (сформированный в виде треугольника):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.sw3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Попробуйте сами »
Слой маски SVG (сформированный в виде звезды):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.sw3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Попробуйте сами »
Слой маски SVG (сформированный в виде кругов):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.sw3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
Попробуйте сами »
CSS Свойства маскировки
В следующей таблице перечислены все свойства маскировки CSS:
| Свойство | Описание |
|---|---|
| mask-image | Указывает изображение, которое будет использоваться в качестве слоя-маски для элемента |
| mask-mode | Указывает, обрабатывается ли изображение слоя маски как маска яркости или как альфа-маска |
| mask-origin | Задает исходное положение (область положения маски) изображения слоя маски |
| mask-position | Задает начальное положение изображения слоя маски (относительно области положения маски) |
| mask-repeat | Указывает, как повторяется изображение слоя маски |
| mask-size | Задает размер изображения слоя маски |