Маскировка CSS
С маскированием CSS вы создаете маскирующий слой, который размещается поверх элемента, чтобы частично или полностью скрыть части элемента.
Свойство CSS mask-image
Свойство CSS mask-imageзадает изображение слоя маски.
Изображение слоя маски может быть изображением PNG, изображением SVG, градиентом CSS или элементом <mask> SVG .
Поддержка браузера
Примечание. Большинство браузеров лишь частично поддерживают маскирование CSS. Вам нужно будет использовать префикс -webkit- в дополнение к стандартному свойству в большинстве браузеров.
Цифры в таблице ниже указывают на первую версию браузера, которая полностью поддерживает это свойство. Цифры, за которыми следует -webkit-, указывают на первую версию, которая работала с префиксом.
| Property | |||||
|---|---|---|---|---|---|
| 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(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Объяснение примера
Свойство mask-imageуказывает изображение, которое будет использоваться в качестве маскирующего слоя для элемента.
Свойство mask-repeatуказывает, будет ли повторяться изображение маски и каким образом. Значение no-repeat
указывает, что изображение маски не будет повторяться (изображение маски будет показано только один раз).
Другой пример
Если мы опустим mask-repeatсвойство, изображение маски будет повторяться на всем изображении из Чинкве-Терре, Италия:
Пример
Вот исходный код:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.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));
}
Используйте SVG в качестве маскирующего слоя
Элемент SVG <mask>можно использовать внутри графики SVG для создания эффектов маскировки.
Здесь мы используем <mask>элемент SVG для создания различных слоев маски для нашего изображения:
Пример
Слой маски 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.w3.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.w3.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.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
Свойства маскирования CSS
В следующей таблице перечислены все свойства маскирования CSS:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |