Маска-зажим - CSS-хитрости

Anonim

Свойство mask-clipCSS является частью спецификации CSS Masking Module Level 1 и устанавливает область рисования маски. Он буквально обрезает фоновую область элемента и определяет, какие области отображаются через маску: граница, отступы или поле содержимого. Это похоже на установку рамки на фото, показывая только те части фотографии, которые не покрыты рамкой. Только в этом случае мы устанавливаем то, что будет обрезано, используя значения CSS Box Model.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Это работает как background-clipсвойство, за исключением того, что у него есть три дополнительных значения, которые применяются к элементам SVG. В следующей демонстрации вы можете изменить область рисования маски с помощью этого свойства. Под ним находится то же изображение, чтобы лучше показать эффект маскировки и пометить границы и отступы:

Синтаксис

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Первоначальный значение: border-box
  • Применимо: ко всем элементам. В SVG это применяется к элементам контейнера, за исключением элемента, всех графических элементов.
  • Унаследовано: нет
  • Тип анимации: дискретная

Значения

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Нарисованное содержимое обрезается по рамке. (Значение по умолчанию)
  • content-box: Нарисованное содержимое обрезается в поле содержимого.
  • fill-box: Окрашенное содержимое обрезается по ограничивающей рамке объекта.
  • margin-box: Нарисованное содержимое обрезается по полю поля.
  • padding-box: Нарисованное содержимое обрезается в поле заполнения.
  • stroke-box: Окрашенное содержимое обрезается по ограничивающей рамке штриха.
  • view-box: Использует ближайшее окно просмотра SVG в качестве справочного окна. Если viewBoxатрибут указан для элемента создания окна просмотра SVG:
    • Поле ссылки расположено в начале системы координат, установленной viewBoxатрибутом.
    • Размер опорной коробки устанавливаются на widthи heightзначение viewBoxатрибута.
  • no-clip: Нарисованное содержимое не обрезается.
  • initial: Применяет настройку свойства по умолчанию, то есть border-box.
  • inherit: Принимает mask-clipзначение родителя.
  • unset: Удаляет ток mask-clipиз элемента.

Примечания

  • Для SVG элементов без соответствующей разметки CSS поля, значение content-box, padding-boxПодсчитать , так fill-boxи для border-boxи margin-boxвычислений в stroke-box.
  • Для элементов со связанным блоком макета CSS значения fill-boxвычисляются до content-boxи для stroke-boxи view-boxвычисляются до начального значения, mask-clipкоторое равно border-box.

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

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-clip: padding-box, border-box, content-box; )

Демо

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

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

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

Статья от 6 ноября 2016 г.

Обрезка и маскирование в CSS

Mojtaba Seyedi