У ЦСС-у својство маск-сизе специфицира величину слике слоја маске. На много начина делује врло слично 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: Играње са ЦСС маскама (видео)