Свойство mask-size CSS

Определение и использование

mask-size Атрибут определяет размер маски изображения.

Пример

Пример 1

Установить размер маски изображения (в процентах):

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Попробуйте сами

Пример 2

Установить размер маски изображения (в пикселях):

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

Попробуйте сами

CSS синтаксис

mask-size: auto|size|contain|cover|initial|inherit;

Значение атрибута

Значение Описание
auto Значение по умолчанию.
size Указать размер маски изображения, можно использовать единицы px, em и т.д., или использовать %.
contain Изменить масштаб маски изображения, чтобы его ширина и высота могли соответствовать внутреннему контейнеру.
cover Изменить масштаб маски изображения, чтобы его ширина и высота могли охватывать контейнер.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Ингерит этот атрибут от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: auto
Ингерит: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: Модуль маскирования CSS уровня 1
JavaScript синтаксис: object.style.maskSize="100px 200px"

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Кروм Эдж Фаерфокс Сафари Опера
120 120 53 15.4 106

Связанные страницы

Урок:Маски CSS

См. также:Свойство mask CSS

См. также:Свойство mask-clip CSS

См. также:Свойство mask-composite CSS

См. также:Свойство mask-image CSS

См. также:Свойство mask-mode CSS

См. также:Свойство mask-origin CSS

См. также:Свойство mask-position CSS

См. также:Свойство mask-repeat CSS

См. также:Свойство mask-type CSS