CSS ماسک پوزیشن اپریٹر

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

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 Masking Module Level 1
آموزش زبان برنامه‌نویسی جاوااسکریپت: object.style.maskPosition="100px center"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را کاملاً پشتیبانی می‌کند.

کروم ایج فایرفاکس سافاری آپرا
120 120 53 15.4 106

مربوط صفحات

تعلیم:CSS شیلنگ

مطالبه:CSS ماسک اپریٹر

مطالبه:CSS ماسک کلیپ اپریٹر

مطالبه:CSS ماسک کمپوزائٹ اپریٹر

مطالبه:CSS ماسک اسیمبل اپریٹر

مطالبه:CSS ماسک موڈ اپریٹر

مطالبه:CSS ماسک آورجین اپریٹر

مطالبه:CSS ماسک ریپیٹ اپریٹر

مطالبه:CSS ماسک سائز اپریٹر

مطالبه:CSS ماسک ٹائپ اپریٹر