Sifa mask
Sifa mask ni kifupi cha sifa zote za kuficha na huruhusu kuweka:
maski ya picha, msimamo wake, ukubwa, hali ya kuchanganya na vigezo vingine.
Ni sifa ya kifupi kwa sifa zifuatazo:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
Syntax
kichaguzi {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
Thamani
| Thamani | Maelezo |
|---|---|
none |
Inazima kuficha kwa maski (thamani chaguomsingi) |
url() |
Anwani ya picha ya maski (SVG, PNG) |
linear-gradient() |
Gradienti laini kama maski |
radial-gradient() |
Gradienti ya miongo kama maski |
position |
Msimamo wa maski (top, center, 50% 50% n.k.) |
size |
Ukubwa wa maski (cover, contain, 100px 50px) |
repeat |
Kurudia maski (no-repeat, repeat-x, space) |
mode |
Hali ya kuchanganya (alpha, luminance, match-source) |
composite |
Uchanganyaji wa maski (add, subtract, intersect, exclude) |
Kuandaa Picha
Tuchukulie tuna picha ya asili ambayo tutakata, na picha za SVG za moyo na mshale, ambazo tutatumia kukata:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
Mfano . Maski ya Picha
Wacha tuweke maski ya moyo kwenye picha yetu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
Mfano . Msimamo wa Maski
Maski ya moyo kwenye kona ya juu kushoto:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
Mfano . Msimamo wa Maski
Maski ya moyo kwenye kona ya chini kulia:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
Mfano . Msimamo wa Maski
Maski ya moyo katikati upande wa kushoto:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
Mfano . Msimamo wa Maski
Maski ya moyo katikati:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
Mfano . Msimamo wa Maski
Maski ya moyo 100px kutoka kushoto na 200px kutoka juu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
Mfano . Ukubwa wa Maski cover
Thamani cover inabadilisha kipimo cha maski ili kufunika kipengele kikamilifu, ikihifadhi uwiano.
Inaweza kata pembe za maski ikiwa uwiano haufanani:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
Mfano . Ukubwa wa Maski contain
Thamani contain inabadilisha kipimo cha maski ili kutoshea kwenye kipengele,
ikihifadhi uwiano. Inaweza kuacha maeneo tupu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
Mfano . Ukubwa wa Maski
Ukubwa uliowekwa huweka vipimo halisi vya maski.
Kwa mfano tufanye maski ya ukubwa 50px:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
Mfano . Kurudia no-repeat
Thamani no-repeat inazima kurudia kwa maski.
Maski inaonyeshwa mara moja tu kwenye msimamo maalum:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
Mfano . Kurudia repeat-x
Thamani repeat-x inarudia maski kwenye mhimili wa usawa pekee:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
Mfano . Uchanganyaji add
Thamani add inaongeza maski nyingi (matokeo ni muunganiko wa maski zote):
<img id="image" src="image.jpg">
#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;
}
:
Mfano . Uchanganyaji intersect
Thamani intersect inaonyesha eneo la makutano ya maski pekee:
<img id="image" src="image.jpg">
#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;
}
:
Mfano . Uchanganyaji exclude
Thamani exclude inaonyesha maeneo ya maski ambayo hayapatani:
<img id="image" src="image.jpg">
#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;
}
:
Mfano . Uchanganyaji subtract
Thamani subtract inatoa maski ya pili kutoka kwa ya kwanza.
Kwa mfano tufanye moyo mmoja na tuondoe
mshale ndani yake:
<img id="image" src="image.jpg">
#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;
}
:
Mfano . Uandishi Wepesi wa mask
Sifa mask, iliyoandikwa kwa sehemu zake tofauti:
<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;
mask-origin: content-box;
mask-clip: content-box;
mask-mode: alpha;
mask-composite: add;
}
:
Mfano . SVG kwa Picha
Matumizi ya kipengele cha SVG kama maski kwa picha:
<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>
#image {
width: 500px;
height: 281px;
background: red;
mask: url(#mask);
}
:
Mfano . SVG kwa Gradienti
Matumizi ya kipengele cha SVG kama maski kwa gradienti:
<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>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
Angalia Pia
-
sifa
mask-position,
inabainisha msimamo wa maski kuhusiana na kipengele -
sifa
mask-image,
inabainisha picha ya maski -
sifa
mask-mode,
inabainisha jinsi maski inavyoshirikiana na mandharinyuma -
sifa
mask-size,
inabainisha ukubwa wa maski -
sifa
mask-repeat,
inabainisha kurudia kwa maski -
sifa
mask-origin,
inabainisha eneo la kuweka msimamo wa maski -
sifa
mask-clip,
inabainisha eneo la kukata maski -
sifa
mask-composite,
inabainisha jinsi maski nyingi zinavyochanganyika
