Размер маски - CSS-хитрости

Anonim

В CSS свойство mask-size определяет размер изображения слоя маски. Во многих отношениях он работает очень похоже на background-sizeсобственность.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Маскирование позволяет отображать выбранные части элемента, скрывая остальные. Размер маски определяется mask-sizeсвойством.

В следующей демонстрации вы можете поиграть с размером изображения слоя маски:

Синтаксис

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Начальное значение: авто
  • Применимо: ко всем элементам. В SVG это применяется к элементам контейнера, за исключением элемента, всех графических элементов и элемента.
  • Унаследовано: нет
  • Тип анимации: повторяющийся список

Это в основном означает, что синтаксис принимает значение background size ( ), которое может быть либо одной или двумя длинами и / или процентами ( ) auto, либо одним из двух ключевых слов ( coverи contain).

  • Когда используются два значения , первое значение определяет ширину изображения маски, а второе значение определяет его высоту .
  • Когда используется одно значение , которое не содержит или покрывает, оно определяет ширину изображения маски, и предполагается, что высота равна auto.

Значения

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Определения значений

  • : Любая действительная и неотрицательная длина CSS, такие как px, em, remи %, среди прочих.
  • : Задает размер изображения слоя маски в процентах относительно области позиционирования маски, которая задается значением mask-origin. По умолчанию это значение равно border-box, что означает, что оно содержит границы, отступы и содержимое поля.
  • auto: Используется внутренняя высота и ширина изображения маски, и для изображений, таких как градиенты, которые не имеют внутренних размеров, оно отображается с размером области позиционирования маски.
  • contain: Масштабирует изображение маски, сохраняя его внутреннюю пропорцию таким образом, чтобы и его ширина, и его высота могли уместиться внутри области позиционирования маски. Для изображений, таких как градиенты, которые не имеют внутренних размеров, они отображаются с размером области позиционирования маски.
  • cover: Масштабирует изображение маски, сохраняя его внутреннюю пропорцию таким образом, чтобы и его ширина, и его высота могли полностью покрывать область позиционирования маски. Для изображений, таких как градиенты, которые не имеют внутренних размеров, они отображаются с размером области позиционирования маски.
  • initial: Применяет настройку свойства по умолчанию, то есть auto.
  • inherit: Принимает значение размера маски родительского элемента.
  • unset: Удаляет ток mask-sizeиз элемента.

Использование нескольких значений

Это свойство может принимать список значений, разделенных запятыми, для размеров маски, и каждое значение применяется к соответствующему изображению слоя маски, указанному в mask-imageсвойстве.

В следующем примере первое значение определяет размер первого изображения, второе значение определяет размер второго изображения и так далее.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

autoзначение

Если значение mask-sizeсвойства указано как auto, например:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Затем изображение маски масштабируется в соответствующих направлениях для сохранения соотношения сторон. Тем не менее, мы можем получить различные результаты в зависимости от внутренних размеров и пропорций изображения.

Пропорция / Размер Без внутренних размеров Одно внутреннее измерение Оба внутренних размера
Имеет пропорцию Отображается так, как если бы вместо этого было указано содержание Отображается в размере, определяемом этим одним измерением и пропорцией Отрисовано с таким размером
Нет пропорции Отображается с размером области позиционирования маски Визуализируется с использованием внутреннего размера и соответствующего размера области позиционирования маски Нет данных

Если значение mask-sizeуказано с autoи другим неавтоматическим значением, например следующим:

.element ( mask-size: auto 200px; )

… тогда:

  • если изображение имеет внутреннюю пропорцию , автоматическое значение вычисляется с использованием указанного размера и внутренней пропорции.
  • если изображение не имеет внутренней пропорции , значение auto становится соответствующим внутренним размером изображения, если оно существует, и, если нет, auto будет соответствующим размером области позиционирования маски.

Понимание coverиcontain

В следующем видео объясняется, как работают ключевые слова содержания и обложки. Обратите внимание, что исходное положение маскирующего слоя находится в центре области позиционирования:

Если изображение не имеет внутреннего соотношения сторон, то указание cover или contain визуализирует изображение маски с размером области позиционирования маски.

И что, черт возьми, такое внутреннее измерение и внутренняя пропорция?

Внутренние размеры - это ширина и высота элемента, а внутренняя пропорция - это их соотношение.

  • Растровое изображение, как и формат PNG, всегда имеет внутренние размеры и внутреннюю пропорцию.
  • Векторное изображение, такое как формат SVG, может иметь оба внутренних размера. Следовательно, у него также есть внутренняя пропорция. Он также может иметь один внутренний размер или не иметь его, и в любом случае он может иметь внутреннюю пропорцию, а может и не иметь.
  • Градиенты похожи на изображения без внутренних размеров или внутренней пропорции.

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

IE Край Fire Fox Хром Сафари Опера
Нет 18+ 53+ Все 4+ 70
Android Chrome Android Firefox Браузер Android iOS Safari опера мини
85+ 79+ 4.4+ Все Все
Источник: caniuse

Демо

В следующей демонстрации для размера маски используется длина. Попробуйте изменить значение на другие типы значений в коде и проверьте результат.

Дополнительная информация

  • Модуль маскирования CSS, уровень 1
  • Обрезка и маскирование в CSS
  • Обрезка против маскирования: когда использовать каждое
  • # 185: Игра с масками CSS (видео)