В mask-clip
CSS Имотът е част от една спецификация 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+ |
Повече информация
Статия на 6 ноември 2016 г.Изрязване и маскиране в CSS








