ویژگی mask-image در CSS

mask-image Property

ویژگی mask-image در CSS تصویری را که برای ماسک کردن یک عنصر استفاده می شود را مشخص می کند.

نحوه نوشتار

/* مقدار با کلیدواژه */
mask-image: none;

/* تعیین آدرس تصویر */
mask-image: url(shape.svg#mask1);

/* مقادیر تصویر */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(shape.png), skyblue);

/* ترکیب چند مقدار */
mask-image: image(url(shape.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

مقادیر

none​

این مقدار تصویری که برای ماسک کردن تعیین شده است را در نظر نمی گیرد.

آدرس تصویر​

آدرسی که به تصویری که به عنوان ماسک استفاده می شود را مشخص می کند.

عملکرد ویژگی mask-image بصورت زیر است:

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

html

 <img src="http://my-project.ir/img/desert.jpg" alt="" />

css

body {
     text-align: center;
     background-color: beige;
} 
img {
     height: 500px;
     mask-image: url(http://my-project.ir/img/Polygon.svg);
     -webkit-mask-image: url(http://my-project.ir/img/Polygon.svg);
     mask-position: center center;
     -webkit-mask-position: center center;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
     mask-size: 100% 100%;
     -webkit-mask-size: 100% 100%;
}

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