mask-position ගුණය
mask-position ගුණය මූලද්රව්යයට සාපේක්ෂව ආවරණයේ ආරම්භක පිහිටීම සකසයි.
එය background-position වලට සමානව ක්රියා කරයි, නමුත් ආවරණ සඳහා යොදනු ලැබේ.
වාක්ය රීතිය
තෝරන්නා {
mask-position: <position>;
}
අගයන්
| අගය | විස්තරය |
|---|---|
top left |
ඉහළ වම් කෙළවරේ (පෙරනිමිය ලෙස). |
center |
මූලද්රව්යයේ මැද. |
50% 50% |
center ට සමානයි. |
right bottom |
පහළ දකුණු කෙළවරේ. |
100px 200px |
පික්සල් වලින් නිශ්චිත ඛණ්ඩාංක. |
උදාහරණය . ආවරණය මධ්යගත කිරීම
රූපය මැද හෘදයක හැඩයේ ආවරණය:
<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;
}
:
උදාහරණය . ඉහළ වම් කෙළවර
ඉහළ වම් කෙළවරේ ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
උදාහරණය . පහළ දකුණු කෙළවර
පහළ දකුණු කෙළවරේ ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
උදාහරණය . නිශ්චිත ඛණ්ඩාංක
ආවරණය නිශ්චිත ඛණ්ඩාංක මගින් පිහිටුවා ඇත:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
උදාහරණය . සියයට පිහිටීම
සියයට භාවිතයෙන් ආවරණයේ පිහිටීම:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
මෙයද බලන්න
-
mask-sizeගුණය,
ආවරණයේ ප්රමාණය තීරණය කරයි -
mask-originගුණය,
පිහිටීම සඳහා ආරම්භක ලක්ෂ්යය තීරණය කරයි -
maskගුණය,
සියලුම ආවරණ ගුණ සඳහා කෙටි ආකාරය
