Маска-кліп - CSS-хитрощі

Anonim

mask-clipВластивість CSS є частиною CSS Маскування модуля рівня 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 Край Firefox Chrome Сафарі Опера
Ні 79+ 53+ Всі 4+ 15+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
Всі Всі Всі Всі 59+
Джерело: caniuse

Більше інформації

Стаття від 6 листопада 2016 року

Відсікання та маскування в CSS

Мойтаба Сейєді