107 of 313 menu

Mask-size касиети

mask-size касиети маска сүрөтүнүн өлчөмүн коёт. Пиксел/пайыз менен так өлчөмдөрдү берүүгө же cover жана contain деген ачкыч сөздөрдү колдонууга болот.

Синтаксис

селектор { mask-size: auto | <length> | <percentage> | cover | contain; }

Маанилер

Маани Сүрөттөмө
auto Сүрөттүн оригиналдуу өлчөмү (демейки).
cover Масканы элемент толугу менен жаап калуу үчүн пропорциясын сактап масштабдайт.
contain Масканы элементтин ичине толугу менен сыя тургандай кылып пропорциясын сактап масштабдайт.
100px 50px Пикселдердеги так өлчөмдөр.
50% 100% Элементтин өлчөмдөрүнүн пайыздары менен өлчөмдөр.

Мисал . Cover өлчөмү

Маска элементти толугу менен жаап калуу үчүн масштабдалат:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center; mask-size: cover; mask-repeat: no-repeat; }

:

Мисал . Contain өлчөмү

Маска элементтин ичине толугу менен сыя тургандай кылып масштабдалат:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center; mask-size: contain; mask-repeat: no-repeat; }

:

Мисал . Пикселдердеги белгиленген өлчөм

150×150 пиксел өлчөмүндөгү маска:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center; mask-size: 150px; mask-repeat: no-repeat; }

:

Мисал . Пайыздар менен өлчөм

Маска элементтин туурасынын 80% жана бийиктигинин 60% алып турат:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center; mask-size: 80% 60%; mask-repeat: no-repeat; }

:

Мисал . Октор боюнча ар башка өлчөмдөр

200px тууралыкта жана 100px бийиктиктеги маска:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center; mask-size: 200px 100px; mask-repeat: no-repeat; }

:

Ошондой эле караңыз

  • mask-position касиети,
    масканын ордун аныктайт
  • mask-repeat касиети,
    масканын кайталанышын аныктайт
  • mask касиети,
    маскалоонун бардык касиеттери үчүн кыскартуу
Кыргызча
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어LietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Биз сайттин иштөөсү, аналитика жана персонализация үчүн cookie файлдарын колдонобуз. Маалыматтарды иштетүү Маалыматты коргоо саясаты боюнча жүргүзүлөт.
баарын кабыл алуу ыңгайлаштыруу четке кагуу