ویژگی 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-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.
سوال داری؟ برو به پنل پرسش و پاسخ