ویژگی mask-clip تعیین می کند که لایه ماسک بر روی کدام نواحی عنصر تاثیر گذار باشد.
مقادیر ویژگی mask-clip
مقادیر این ویژگی مشابه background-clip می باشد با این تفاوت که ویژگی mask-clip سه مقدار بیشتر می پذیرد که آنها برای عناصر SVG مورد استفاده قرار می گیرند.
mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip
چهار مقدار margin-box, border-box, padding-box و content-box بر روی عناصر HTML اعمال می شوند، و اگر برای عناصر SVG از آنها استفاده شود تبدیل به مقدار fill-box برای آن عنصر SVG خواهند شد.
سه مقدار fill-box, stroke-box و view-box بر روی عناصر SVG اعمال می شوند و اگر برای عناصر HTML از آنها استفاده شود تبدیل به مقدار اولیه ویژگی mask-clip برای آن عنصر HTML خواهند شد.
عنصر زیر دارای 20 پیکسل border و 20 پیکسل padding می باشد.
لایه ماسکی بر روی این عنصر بصورت زیر اعمال می کنیم:
.el {
mask-image: url(masklayer.png);
mask-size: 100px auto;
}
در ادامه مقادیر زیر را با استفاده از این مثال بررسی می کنیم:
content-box
لایه ماسک بر ناحیه content-box (یعنی قسمتی که محتوا در آن قرار میگیرد و همان داخلی ترین ناحیه) تاثیر خواهد گذاشت.
.el {
mask-clip: content-box;
}
نتیجه مثال بالا بصورت زیر خواهد بود:
padding-box
تعیین مقدار padding-box برای ویژگی mask-clip باعث می شود تا لایه ماسک فقط بر روی ناحیه محدود به Padding تاثیر بگذارد:
.el {
mask-clip: padding-box;
}
نتیجه مثال بالا بصورت زیر خواهد بود:
همانطور که مشاهده می کنید این بار فقط ناحیه Padding و ناحیه های داخلی تر نسبت به آن ماسک شدند.
border-box
border-box مقدار پیش فرض و اولیه ویژگی می باشد.
تعیین مقدار border-box برای ویژگی mask-clip باعث می شود تا لایه ماسک فقط بر روی ناحیه محدود به Border تاثیر بگذارد:
.el {
mask-clip: border-box;
}
نتیجه مثال بالا بصورت زیر خواهد بود:
margin-box
تعیین مقدار margin-box برای ویژگی mask-clip باعث می شود تا لایه ماسک فقط بر روی ناحیه محدود به margin و ناحیه های داخلی نسبت به آن تاثیر بگذارد:
.el {
mask-clip: margin-box;
}
fill-box
این مقدار برای عناصر SVG تعیین می شود و باعث می شود تا لایه ماسک فقط بر روی خود شیء تاثیر بگذارد و نه حاشیه و خطوط بیرونی آن.
stroke-box
این مقدار برای عناصر SVG تعیین می شود و باعث می شود تا لایه ماسک بر روی خود شی و Stroke یا خط بیرونی شیء تاثیر گذار باشد.
view-box
این مقدار نیز برای عناصر SVG تعیین می شود و ناحیه ماسک کردن به نزدیک ترین viewport محدود می شود.
اگر مقادیر viewBox برای عنصر تعیین شده باشند در نتیجه ناحیه ماسک کردن به همان مختصات تعیین شده توسط viewBox محدود می شود.
no-clip
این مقدار باعث می شود تا هیچ برشی نسبت به ناحیه های مختلف برای ماسک کردن بوجود نیاید. یعنی ماسک کردن به هیچ ناحیه ای محدود نشود و در همه نواحی اعمال شود.
تعیین این ویژگی برای چند لایه
این ویژگی می تواند مجموعه ای از این مقادیر را نیز بپذیرد که مقادیر مختلف برای لایه های مختلف ماسک که توسط ویژگی mask-image تعیین می شوند استفاده می شود و مقادیر توسط ویرگول از هم جدا می شوند.
.el {
mask-image: url(myMask.png), url(secondMask.png);
mask-clip: content-box, border-box;
}
دمو
دموی زیر را بررسی کنید و مقادیر آن را برای ویژگی mask-clip تغییر دهید:
See the Pen mask-clip by Mojtaba Seyedi (@seyedi) on CodePen.
سوال داری؟ برو به پنل پرسش و پاسخ