mask-position

ویژگی mask-position مکان و موقعیت لایه ماسک را بر روی عنصر مشخص می کند. مقادیر این ویژگی کاملا مشابه به ویژگی background-position می باشند.

مقادیر ویژگی mask-position

مقدار اولیه و پیشفرض این ویژگی 0% 0% می باشد که باعث می شود تا لایه ماسک در گوشه بالا و سمت چپ قرار بگیرد.

مقادیری که این ویژگی می پذیرد شامل کلمات کلیدی top, left, bottom, right و center و همچنین از مقادیر طولی و درصد نیز می توان برای تعیین مکان لایه ماسک در این ویژگی استفاده کرد.

برای بررسی دقیق تر این مقادیر و کلمات کلیدی به مطلب مربوط به background-position مراجعه کنید.

به عنوان مثال برای در مرکز قرار دادن لایه ماسک کافی است این مقدار را بر روی center تنظیم کنیم:


img {
  mask-image: url(masklayer.png);
  mask-repeat: no-repeat;
  mask-size: 300px;

  mask-position: center; /* قرار دادن لایه ماسک در مرکز عنصر */
}

در نتیجه داریم:

 
ویژگی mask-position در سی اس اس و مرکز قرار دادن لایه ماسک
 

تعیین این ویژگی برای چند لایه

این ویژگی می تواند مجموعه ای از این مقادیر را نیز بپذیرد که مقادیر مختلف برای لایه های مختلف ماسک که توسط ویژگی mask-image تعیین می شوند استفاده می شود و مقادیر توسط ویرگول از هم جدا می شوند.

برای اینکه مکان لایه های مختلف ماسک را تعیین کنیم کافی است بصورت زیر از ویرگول استفاده کنیم:


.element {
    mask-image: url(first-mask.png), url(second-mask.png);
    mask-position: top left, bottom right;
}

دمو

دموی زیر را بررسی کنید و مقادیر آن را تغییر دهید:

 

See the Pen mask-position by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *