Положај маске - ЦСС-трикови

Anonim

У ЦСС-у mask-positionсвојство специфицира почетни положај слике слоја маске у односу на подручје положаја маске. Ради као background-positionимање.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

Маскирање вам омогућава да прикажете одабране делове елемента док сакривате остатак. У следећој демонстрацији можете променити положај слике слоја маске:

Синтакса

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Почетна вредност: 0% 0%
  • Односи се на: све елементе. У СВГ-у се односи на елементе контејнера искључујући елемент, све графичке елементе и елемент.
  • Наследио: не
  • Израчуната вредност: састоји се од: две кључне речи које представљају порекло и два померања од тог исходишта, свака дата као апсолутна дужина (ако је дата а ), иначе у процентима.
  • Тип анимације: поновљива листа

Вредности

Може бити наведен у погледу оффсет кључних речи ( top, left, bottom, right, и center), у процентима, и вредности дужине у вези са ивице елемента, сличан ЦСС background-positionимовину.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Дефиниције вредности

  • : Било валидан ЦСС дужина (као што су px, em, remи %, између осталог) који ће одредити колико је ивица маске слике је од одговарајућег ивице елемента.
  • : Одређује положај слике слоја маске као процентуалну вредност у односу на подручје позиционирања маске умањену за величину слике маске.
  • top: Еквивалентно 0% за вертикални положај.
  • right: Еквивалентно 100% за хоризонтални положај.
  • bottom: Еквивалентно 100% за вертикални положај.
  • left: Еквивалентно 0% за хоризонтални положај.
  • center: Еквивалентно 50% за хоризонтални положај ако хоризонтални положај није другачије наведен, или 50% за вертикални положај, ако јесте.
  • initial: Примењује подразумевану поставку својства, која је 0% 0%.
  • inherit: Усваја mask-positionвредност родитеља.
  • unset: Уклања струју mask-positionиз елемента.

Коришћење више вредности

Ово својство може узети листу вредности раздвојених зарезом за позиције маске и свака вредност се примењује на одговарајућу слику слоја маске која је наведена у mask-imageсвојству. У следећем примеру прва вредност одређује положај прве слике, друга вредност одређује положај друге слике итд.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Различита синтакса

mask-position може узети једну, две, три или четири вредности за одређивање положаја слоја маске хоризонтално и вертикално.

Појединачна вредност

У случају да је постављена једна вредност , то се узима као хоризонтална вредност, а претпоставља се да је вертикална вредност center.

mask-position: 100px; /* 100px center */
Две вредности

У случају коришћења вредности пара, прва се узима као хоризонтална вредност, а друга одређује положај слоја израде вертикално.

mask-position: 10% 50%; /* x=10%, Y=50% */

Ако су обе вредности кључне речи, редослед кључних речи је небитан:

mask-position: top left; /* = left top */

Али када имамо комбинацију кључне речи и дужине или процента, редослед је важан и прва вредност увек одговара хоризонталном одмаку. Стога:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Три вредности

Ако су дате три вредности, претпоставља се да ће помак који недостаје једнак нули:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Четири вредности

Синтакса са четири вредности омогућава вам да одредите на које стране елемента постављате маску у односу (вредности 1 и 3), а затим и удаљеност од тих страница (вредности 2 и 4).

Дакле, ако желите да поставите маску 100пк са дна елемента и 200пк са десне стране, можете да урадите следеће:

mask-position: bottom 100px right 200px;

Животињске маске

Могуће је анимирати положај маске и mask-sizeкористећи анимацију кључног кадра и ЦСС прелазак, као што је следеће:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

У следећем демонстрационом делу анимирамо положај слоја маске користећи анимацију кључног кадра:

Демо

Промените вредност за mask-positionу следећој демонстрацији:

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

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

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

  • ЦСС модул за маскирање ниво 1 (Нацрт уредника)
  • Исецање и маскирање у ЦСС-у
  • Исецање наспрам маскирања: када користити сваку
  • # 185: Играње са ЦСС маскама (видео)