ویژگی mask-position CSS

صفحه قبل mask-origin
صفحه بعدی mask-repeat

تعریف و کاربرد

mask-position این ویژگی موقعیت شروع تصویر پوشاننده را (مقابل موقعیت ماسک) تنظیم می‌کند.

نکته:به طور پیش‌فرض، تصویر پوشاننده در بالای چپ عنصر قرار دارد و در جهت عمودی و افقی تکرار می‌شود.

مثال

مثال 1

موقعیت تصویر پوشاننده را به وسط تنظیم می‌کند:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

آزمایش کنید

مثال 2

موقعیت تصویر پوشاننده را به پایین راست تنظیم می‌کند:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

آزمایش کنید

نویسه‌های CSS

mask-position: value;

مقدار ویژگی

مقدار	توضیح
left top left center left bottom right top right center right bottom center top center center center bottom	اگر تنها یک کلمه کلیدی مشخص شود، مقدار دیگر "center" خواهد بود.
x% y%	مقدار اول موقعیت افقی است، مقدار دوم موقعیت عمودی است. بالای چپ 0% 0% است. پایین راست 100% 100% است. اگر تنها یک مقدار مشخص شود، مقدار دیگر 50% خواهد بود. مقدار پیش‌فرض: 0% 0%
xpos ypos	مقدار اول موقعیت افقی است، مقدار دوم موقعیت عمودی است. بالای چپ 0 0 است. واحد می‌تواند پیکسل (0px 0px) یا هر واحد دیگر CSS باشد. اگر تنها یک مقدار مشخص شود، مقدار دیگر 50% خواهد بود. می‌توان % و موقعیت را مخلوط کرد.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit	این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	0% 0%
ارث‌برداری:	خیر
انیمیشن:	پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	مодуل ماسک CSS سطح 1
جاواسکریپت:	object.style.maskPosition="100px center"