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 پشتیبانی می کنند.