Маска-клип - CSS-трикове

Anonim

В mask-clipCSS Имотът е част от една спецификация CSS маскиране Модул ниво и поставя боядисване района на маска. Той буквално изрязва фоновата област на елемент и определя кои области да се показват през маската: рамка, подложка или поле за съдържание. Това е нещо като поставяне на рамката на снимка, показваща само частите от снимката, които не са покрити от рамката. Само в този случай задаваме това, което се отрязва, като използваме стойностите на 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

Мойтаба Сейеди