Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет CSS Фон CSS Границы CSS Поля CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Перекрытие CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдоклассы CSS Псевдоэлементы CSS Прозрачность CSS Навигация сайта CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Атрибут селектора CSS Формы CSS Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

CSS3 Закругленные углы CSS3 Изображен. граница CSS3 Слои фона изображ. CSS3 Цвета CSS Ключевые сл. цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D Трансформация CSS3 3D Трансформация CSS3 Переход CSS3 Анимация CSS3 Всплыв. подсказки CSS3 Стиль изображения CSS3 Отраж. изображения CSS3 Объект-подгонка CSS3 Объект-позиция CSS3 Маскировка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Размеры боксов CSS3 Медиа запросы CSS3 Медиа примеры CSS3 Флексбокс

CSS Адаптивный

АВД-Введение АВД-Область просмотра АВД-Вид сетка АВД-Медиа запросы АВД-Изображения АВД-Видео АВД-Фреймворк АВД-Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры кода CSS Онлайн редактор CSS Фрагменты кода CSS Тест-викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

CSS Маскировка



С помощью 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), которое мы будем использовать:

schoolsw3

Вот изображение из Чинкве-Терре, в Италии:

Чинкве-Терре

Теперь мы применяем изображение маски (изображение в формате 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 (сформированный в виде треугольника):

<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 (сформированный в виде звезды):

<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 (сформированный в виде кругов):

<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 Задает размер изображения слоя маски