Маска-копча - ЦСС-трикови

Anonim

mask-clipЦСС имовина је део је ЦСС маскирања модул Левел 1 спецификацији, и поставља маску паинтинг област. Буквално исече позадинску површину елемента и дефинише која подручја се приказују кроз маску: обруб, додаци или оквир са садржајем. То је некако као да ставите оквир на фотографију, приказујући само делове фотографије који нису покривени оквиром. Само, у овом случају, постављамо оно што се исече помоћу вредности ЦСС Бок модела.

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

Ово функционише као background-clipсвојство, осим што има три додатне вредности које се примењују на СВГ елементе. У следећој демонстрацији можете променити подручје сликања маске помоћу овог својства. Испод је иста слика која показује ефекат бољег маскирања и обележавања ивица и облога:

Синтакса

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Почетна вредност: border-box
  • Односи се на: све елементе. У СВГ-у се односи на елементе контејнера искључујући елементе, све графичке елементе.
  • Наследио: не
  • Тип анимације: дискретна

Вредности

/* 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: Користи најближи приказ СВГ-а као референтни оквир. Ако је viewBoxатрибут наведен за СВГ елемент за креирање оквира за приказ:
    • Референтни оквир је позициониран на почетку координатног система успостављеног viewBoxатрибутом.
    • Димензија референтног оквира је постављена на widthи heightвредности viewBoxатрибута.
  • no-clip: Обојени садржај није исечен.
  • initial: Примењује подразумевану поставку својства, која је border-box.
  • inherit: Усваја mask-clipвредност родитеља.
  • unset: Уклања струју mask-clipиз елемента.

Напомене

  • За СВГ елемената без повезаног ЦСС Лаиоут оквира, вредности content-box, padding-boxизрачунава на fill-boxи за border-boxи margin-boxра ~ на stroke-box.
  • За елементе са пратећим ЦСС распоред прозора, вредности 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; )

Демо

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
Не 79+ 53+ Све 4+ 15+
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари Опера Мобиле
Све Све Све Све 59+
Извор: каниус

Више информација

Чланак 6. новембра 2016

Исецање и маскирање у ЦСС-у

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