Свойство CSS mask-image
Маскирование CSS скрывает часть элемента или весь элемент, размещая поверх него слой маски.
Изображение слоя вы выбираете с помощью свойства mask-image. Подойдут и PNG-, и SVG-изображения, а также градиенты CSS и SVG-элемент <mask>.
Использование PNG-изображения как Слоя Маски
PNG-изображение передаётся как слой маски с помощью значения url().
Такое изображение должно содержать прозрачную или полупрозрачную область. Прозрачность скрывает элемент, а непрозрачные пиксели, даже чёрные, оставляют его видимым.
Здесь вместе работают два свойства. mask-image указывает изображение, которое маскирует элемент, а mask-repeat определяет, повторяется ли это изображение и как именно, причём no-repeat показывает его один раз.
Пример
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - PNG</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>CSS Mask Image - PNG</h1>
<p>The mask-image property specifies the image to be used as a mask layer for an element.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Повторение Изображения Слоя Маски
Если убрать свойство mask-repeat, изображение маски будет повторяться по всему изображению.
Пример
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - Repeat</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}
</style>
</head>
<body>
<h1>CSS Mask Image - Repeat</h1>
<p>If we omit the mask-repeat property, the mask image will be repeated all over the image.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Позиционирование Изображения Слоя Маски
Изображение маски начинается в левом верхнем углу своего элемента и повторяется в обоих направлениях. Чтобы оно начиналось в другом месте, используйте mask-position: его значение задаётся относительно области позиционирования маски.
Пример
Здесь изображение слоя маски расположено по центру:
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - Position</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
</style>
</head>
<body>
<h1>CSS Mask Image - Position</h1>
<p>The mask-position property sets the starting position of a mask image.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>