Розмір маски - CSS-хитрощі

Anonim

У CSS властивість size-size визначає розмір зображення шару маски. Багато в чому це працює дуже як background-sizeвласність.

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

Маскування дозволяє відображати вибрані частини елемента, приховуючи решту. Розмір маски визначається mask-sizeвластивістю.

У наступній демонстрації ви можете пограти з розміром зображення шару маски:

Синтаксис

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Початкове значення: авто
  • Застосовується до: Усі елементи. У SVG це застосовується до елементів контейнера, за винятком елемента, усіх графічних елементів та елемента
  • Успадковано: ні
  • Тип анімації: повторюваний список

Це в основному говорить про те, що синтаксис приймає значення розміру фону ( ), яке може бути однією або двома довжинами та / або відсотками ( ), встановленими на 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;

Визначення цінностей

  • : Будь-яка дійсна і неотрицательная довжина CSS, такі як 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

У наступному відео пояснюється, як працюють ключові слова містять і охоплюють. Зверніть увагу, що початкове положення шару маски знаходиться в центрі області позиціонування:

Якщо зображення не має власного співвідношення сторін, тоді вказівка ​​або обкладинки, або вмісту відображає зображення маски за розміром області позиціонування маски.

І що за біса - це внутрішній вимір і внутрішня пропорція?

Внутрішні розміри - це ширина та висота елемента, а внутрішня пропорція - їх відношення.

  • Растрове зображення, як формат PNG, завжди має внутрішні розміри та внутрішню пропорцію.
  • Векторне зображення, як формат SVG, може мати обидва внутрішні розміри. Тому він також має внутрішню частку. Він також може мати один або ніякі внутрішні виміри, і, в будь-якому випадку, він може мати або не мати внутрішньої пропорції.
  • Градієнти схожі на зображення без внутрішніх розмірів або внутрішньої пропорції.

Підтримка браузера

IE Край Firefox Chrome Сафарі Опера
Ні 18+ 53+ Всі 4+ 70
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mini
85+ 79+ 4,4+ Всі Всі
Джерело: caniuse

Демо

Наступна демонстрація використовує довжину для розміру маски. Спробуйте змінити значення на інші типи значень у коді та перевірте результат.

Більше інформації

  • Модуль маскування CSS рівень 1
  • Відсікання та маскування в CSS
  • Відсікання проти маскування: коли використовувати кожен
  • # 185: Гра з масками CSS (відео)