ویژگی mask-position در CSS

mask-position Property

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

نحوه نوشتار

/* مقدار کلیدواژه */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/* تعیین موقعیت */
mask-position: 15% 45%;
mask-position: 20px 0px;
mask-position: 10px 8rem;

/* مقادیر چندتایی */
mask-position: top right;
mask-position: 1rem 1rem, center;

مقادیر

موقعیت​

ماسک بر روی تصویر یا عنصر، مانند حالت display: absolute عمل می کند که با استفاده از تعیین مقادیر به نحوی که در بالا ارائه شد موقعیت آن را مشخص می کنیم.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

body {
   background-color: beige;
}

css

img {
    height: 250px;
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
    mask-position: 10% 10%;
   -webkit-mask-position: 10% 10%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 30% 30%;
    -webkit-mask-size: 30% 30%;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.