Хосияти 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);
}

Результат:

Инчунин нигаред