ویژگی mask-image CSS

صفحه قبل mask-composite
صفحه بعدی mask-mode

تعریف و استفاده

mask-image این属性 برای مشخص کردن تصویری که به عنوان پوشش عناصر استفاده می‌شود، استفاده می‌شود.

توجه:محدوده‌های خطی و مختلط در CSS نیز می‌توانند به عنوان تصاویر پوشش استفاده شوند.

مثال

مثال 1

ایجاد پوشش برای تصاویر:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

آزمایش کنید

مثال 2

استفاده از محدوده‌های خطی و مختلط برای ایجاد پوشش‌های مختلف برای تصاویر:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

آزمایش کنید

مثال 3

برای ایجاد لایه ماسک برای تصویر از عنصر <mask> SVG استفاده کنید:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

آزمایش کنید

مثال 4

برای ایجاد لایه ماسک دیگری برای تصویر از عنصر <mask> SVG استفاده کنید:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

آزمایش کنید

جمله‌نویسی CSS

mask-image: none|image|url()|initial|inherit;

مقدار ویژگی

مقدار	توضیح
none	مقدار پیش‌فرض. از عکس ماسک استفاده نمی‌شود.
image	عکس به عنوان لایه ماسک استفاده می‌شود.
url()	اشاره به URL تصویر یا عنصر <mask> SVG.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: initial.
inherit	این ویژگی را از عنصر پدر خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	none
ارث‌پذیری:	خیر
انیمیشن‌سازی:	پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	مодуل ماسک CSS سطح 1
جمله‌نویسی JavaScript:	object.style.maskImage="url(star.svg)"