mask-origin ගුණය

mask-origin ගුණය මුහුණත පිහිටුවීම සඳහා ආරම්භක ලක්ෂ්‍යය සකසයි. මූලද්‍රව්‍යයේ කුමන කොටසකට සාපේක්ෂව (යාබද සීමාව, පැඩිං හෝ අන්තර්ගතය) මුහුණත ස්ථානගත කරනු ඇත්දැයි එය නිර්වචනය කරයි.

වාක්‍ය රචනා ක්‍රමය

තෝරන්නා {
	mask-origin: content-box | padding-box | border-box;
}

අගයන්

අගය	විස්තරය
`border-box`	මුහුණත මූලද්‍රව්‍යයේ සීමාවට (border ඇතුළුව) සාපේක්ෂව ස්ථානගත වේ.
`padding-box`	මුහුණත පැඩිං ප්‍රදේශයට සාපේක්ෂව ස්ථානගත වේ (පෙරනිමියෙන්).
`content-box`	මුහුණත මූලද්‍රව්‍යයේ අන්තර්ගතයට සාපේක්ෂව ස්ථානගත වේ.

නිදර්ශනය . border-box

මුහුණත මූලද්‍රව්‍යයේ සීමාවට සාපේක්ෂව ස්ථානගත වේ:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: border-box;
}

නිදර්ශනය . padding-box

මුහුණත පැඩිං ප්‍රදේශයට සාපේක්ෂව ස්ථානගත වේ:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: padding-box;
}

නිදර්ශනය . content-box

මුහුණත අන්තර්ගතයට සාපේක්ෂව ස්ථානගත වේ:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: content-box;
}

මෙයද බලන්න

mask-clip ගුණය,
මුහුණත කපා හැරීමේ ප්‍රදේශය නිර්වචනය කරයි
mask-position ගුණය,
මුහුණතේ ස්ථානය සකසයි
mask ගුණය,
සියලු මුහුණත දැමීමේ ගුණාංග සඳහා කෙටි යෙදුම
background-origin ගුණය,
මූලද්‍රව්‍යයේ පසුබිම සඳහා සමාන ගුණය