Размер на маска - CSS-трикове

Anonim

В CSS свойството mask-size определя размера на изображението на слоя на маска. В много отношения работи много подобно на background-sizeимота.

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

Маскирането ви позволява да показвате избрани части от елемент, докато скривате останалите. Размерът на маската се определя от mask-sizeсвойството.

В следващата демонстрация можете да си поиграете с размера на изображението на слоя с маска:

Синтаксис

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Начална стойност: автоматично
  • Отнася се за: Всички елементи. В SVG се отнася за елементи на контейнера с изключение на елемента, всички графични елементи и елемента
  • Наследен: не
  • Тип анимация: повторяем списък

Това основно казва, че синтаксисът приема стойност на фона size ( ), която може да бъде една или две дължини и / или проценти ( ), зададени на 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 опера мини
85+ 79+ 4.4+ всичко всичко
Източник: caniuse

Демонстрация

Следващата демонстрация използва дължина за размера на маската. Опитайте да промените стойността на други видове стойности в кода и проверете резултата.

Повече информация

  • CSS маскиращ модул Ниво 1
  • Изрязване и маскиране в CSS
  • Изрязване срещу маскиране: Кога да се използва всеки
  • # 185: Игра с CSS маски (видео)