Својството mask

Својството mask е кратенка за сите својства на маскирање и овозможува да се зададе: слика-маска, нејзината позиција, големина, режим на мешање и други параметри.

Е својство-кратенка за следниве својства: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Синтакса

cssселектор {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

Вредности

Подготовка на слики

Нека имаме слика од природа која ќе ја обработуваме, и SVG слики од срце и стрелка, по кои ќе изрежуваме:

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

Пример . Маска-слика

Ајде да наложиме маска-срце на нашата слика:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url("heart.svg") center/300px no-repeat;
}

Результат:

Пример . Позиција на маската

Маска-срце во горниот лев агол:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left top/150px no-repeat;
}

Результат:

Пример . Позиција на маската

Маска-срце во долниот десен агол:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") right bottom/150px no-repeat;
}

Результат:

Пример . Позиција на маската

Маска-срце во центар лево:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center/150px no-repeat;
}

Результат:

Пример . Позиција на маската

Маска-срце во центар:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
}

Результат:

Пример . Позиција на маската

Маска-срце 100px од лево и 200px од горе:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") 100px 200px /150px no-repeat;
}

Результат:

Пример . Големина на маската cover

Вредноста cover ја скалира маската за целосно да ја покрие елемент, задржувајќи ги пропорциите. Може да ги исече рабовите на маската ако пропорциите не се совпаѓаат:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

Пример . Големина на маската contain

Вредноста contain ја скалира маската за целосно да се вклопи во елемент, задржувајќи ги пропорциите. Може да остава празни области:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/contain no-repeat;
}

Результат:

Пример . Големина на маската

Фиксна големина поставува точни димензии на маската. На пример, да направиме маска со големина 50px:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/50px no-repeat;
}

Результат:

Пример . Повторување no-repeat

Вредноста no-repeat оневозможува повторување на маската. Маската се прикажува само еднаш во назначената позиција:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") top left / 150px no-repeat;
}

Результат:

Пример . Повторување repeat-x

Вредноста repeat-x ја повторува маската само по хоризонталната оска:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center / 50px repeat-x;
}

Результат:

Пример . Композиција add

Вредноста add ги собира повеќе маски (резултат - соединување на сите маски):

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 200px 30px / 150px no-repeat;
  mask-composite: add;
}

Результат:

Пример . Композиција intersect

Вредноста intersect ја прикажува само областа на пресек на маските:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: intersect;
}

Результат:

Пример . Композиција exclude

Вредноста exclude ги прикажува областите на маските кои не се пресекуваат:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: exclude;
}

Результат:

Пример . Композиција subtract

Вредноста subtract ја одзема втората маска од првата. За пример, да направиме едно срце и да ја одземеме од него стрелката:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 250px no-repeat,
    url("arrow.svg") 170px 80px / 120px no-repeat;
    
    
  mask-composite: subtract;
}

Результат:

Пример . Проширен запис на mask

Својството mask, запишано како посебни составлянски:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-origin: content-box;
  mask-clip: content-box;
  mask-mode: alpha;
  mask-composite: add;
}

Результат:

Пример . SVG за слика

Користење на SVG-елемент како маска за слика:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url(#mask);
}

Результат:

Пример . SVG за градиент

Користење на SVG-елемент како маска за градиент:

html<div id="elem"></div>
<svg width="0" height="0">
  <mask id="star-mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

Погледнете исто така