css mask

mask CSS Style Property

המאפיין mask מסתיר אלמנט (חלקי או מלא) על ידי מיסוך או גזירה של התמונה בנקודות ספציפיות.

הערה: בנוסף למאפיינים המפורטים להלן, קיצור המסכה גם מאפס את ה-mask-border לערך ההתחלתי שלו. לכן מומלץ להשתמש בקיצור המסכה ולא בקיצורים אחרים או במאפיינים הבודדים כדי לעקוף את כל הגדרות המסכה מוקדם יותר במפל. זה יבטיח שגם ה-mask-border אופס כדי לאפשר לסגנונות החדשים להיכנס לתוקף.

נכסים מרכיבים
מאפיין זה הוא קיצור למאפייני ה-CSS הבאים:

קליפ מסכה
מסכה-מרוכבת
תמונת מסכה
מצב מסכה
מסיכה-מקור
מיקום המסכה
מסכה-חזור
בגודל מסכה

דוגמא: החלת מסכה (קיצור)

Demo Panel:
CSS: 111
HTML: 222
Syntax:

Valid values:
  • left, center, right, top, bottom
  • auto, cover, contain
  • repeat-x, repeat-y, repeat, space, round, no-repeat, stretch
  • fill-box, stroke-box, view-box
  • content-box, padding-box, border-box, margin-box
  • add, subtract, intersect, exclude, alpha, luminance, match-source, no-clip


Units: px, %


Js Syntax: element.style.mask

תאימות דפדפנים

mask
הערך שנבדקChromeFirefoxEdgeCOpera
url(logo.png)✔️✔️✔️✔️
left✔️✔️✔️✔️
center✔️✔️✔️✔️
right✔️✔️✔️✔️
top✔️✔️✔️✔️
bottom✔️✔️✔️✔️
repeat-x✔️✔️✔️✔️
repeat-y✔️✔️✔️✔️
repeat✔️✔️✔️✔️
space✔️✔️✔️✔️
round✔️✔️✔️✔️
no-repeat✔️✔️✔️✔️
fill-box✔️✔️✔️✔️
stroke-box✔️✔️✔️✔️
view-box✔️✔️✔️✔️
auto
cover
contain
stretch