Величина маске - ЦСС-трикови

Anonim

У ЦСС-у својство маск-сизе специфицира величину слике слоја маске. На много начина делује врло слично background-sizeвласништву.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Маскирање вам омогућава да прикажете одабране делове елемента док сакривате остатак. Величина маске је дефинисана mask-sizeсвојством.

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

Синтакса

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Почетна вредност: ауто
  • Односи се на: Сви елементи. У СВГ-у се односи на елементе контејнера искључујући елемент, све графичке елементе и елемент
  • Наследио: не
  • Тип анимације: поновљива листа

То у основи говори да синтакса прихвата вредност величине позадине ( ) која може бити једна или две дужине и / или проценти ( ), постављена на autoили једну од две кључне речи ( coverи contain).

  • Када се користе две вредности , прва вредност одређује ширину слике маске, а друга вредност одређује њену висину .
  • Када се користи једна вредност која не садржи или покрива, она дефинише ширину слике маске и претпоставља се да је висина auto.

Вредности

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

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

  • : Сваки важи и не-негативни ЦСС дужине, као што су px, em, remи %, између осталог.
  • : Одређује величину слике слоја маске као процентуалну вредност у односу на област позиционирања маске, која се подешава вредношћу mask-origin. Подразумевано је ова вредност border-box, што значи да садржи обрубе, облоге и садржај оквира.
  • auto: Користи се унутрашња висина и ширина слике маске, а за слике попут градијената који немају унутрашње димензије, она се приказује у величини подручја позиционирања маске.
  • contain: Скалира слику маске, уз очување њене суштинске пропорције на начин да и њена ширина и висина стану унутар подручја позиционирања маске. За слике попут градијената који немају суштинске димензије, она се приказује у величини подручја позиционирања маске.
  • cover: Скалира слику маске, задржавајући њену унутрашњу пропорцију на начин да и њена ширина и висина могу у потпуности покрити подручје позиционирања маске. За слике попут градијената који немају суштинске димензије, она се приказује у величини подручја позиционирања маске.
  • initial: Примењује подразумевану поставку својства, која је auto.
  • inherit: Прихвата вредност величине маске родитеља.
  • unset: Уклања струју mask-sizeиз елемента.

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

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

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

autoвредност

Ако је вредност mask-sizeсвојства наведена као auto, овако:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

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

Пропорција / Димензија Нема унутрашњих димензија Једна суштинска димензија Обе суштинске димензије
Има пропорцију Приказане као да је уместо тога наведено садржавање Приказана у величини одређеној том димензијом и пропорцијом Приказане у тој величини
Нема пропорције Приказана у величини подручја за позиционирање маске Рендеровано коришћењем унутрашње димензије и одговарајуће димензије подручја позиционирања маске Н / А

Ако је вредност mask-sizeназначена са autoи другом неаутоматском вредношћу, попут следеће:

.element ( mask-size: auto 200px; )

… онда:

  • ако слика има унутрашњу пропорцију , аутоматска вредност се израчунава помоћу наведене димензије и унутрашње пропорције.
  • ако слика нема унутрашњу пропорцију , аутоматска вредност постаје одговарајућа унутрашња димензија слике ако постоји, а ако не постоји, аутоматски ће бити одговарајућа димензија подручја позиционирања маске.

Разумевање coverиcontain

Следећи видео објашњава како функционишу кључне речи садрже и садрже. Имајте на уму да је почетни положај слоја маске у центру подручја позиционирања:

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

И шта је, доврага, суштинска димензија и суштинска пропорција?

Унутрашње димензије су ширина и висина елемента, а унутрашња пропорција је њихов однос.

  • Битмап слика попут ПНГ формата, увек има унутрашње димензије и суштинску пропорцију.
  • Векторска слика попут СВГ формата може имати обе суштинске димензије. Према томе, она такође има унутрашњу пропорцију. Такође може имати једну или никакве унутрашње димензије и, у оба случаја, може имати или не имати унутрашњу пропорцију.
  • Градијенти су попут слика без унутрашњих димензија или суштинске пропорције.

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

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

Демо

Следећи демо користи дужину за величину маске. Покушајте да промените вредност у друге врсте вредности у коду и проверите резултат.

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

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