ویژگی mask-composite CSS

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

mask-composite ویژگی تعیین می‌کند که عمل ترکیب استفاده شده توسط لایه‌های پوشش فعلی و لایه‌های پوشش زیرین چیست.

مثال

نمایش mask-composite مقدارهای مختلف ویژگی:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: بدون تکرار;
  mask-size: 100%;
  background: آبی;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(شفاف 50%, سیاه);
  mask-image: url(img_rectangle.svg), radial-gradient(شفاف 50%, سیاه);
}
.mask1 {
  mask-composite: افزودن;
}
.mask2 {
  mask-composite: کسر;
}
.mask3 {
  mask-composite: همپوشانی;
}
.mask4 {
  mask-composite: exclude;
}

آزمایش کنید

آموزش نحوی CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

صفحات مرتبط

آموزش:پوشش CSS

ارجاع به:ویژگی mask CSS

ارجاع به:ویژگی mask-clip CSS

ارجاع به:ویژگی mask-image CSS

ارجاع به:ویژگی mask-mode CSS

ارجاع به:ویژگی mask-origin CSS

ارجاع به:ویژگی mask-position CSS

ارجاع به:ویژگی mask-repeat CSS

ارجاع به:ویژگی mask-size CSS

ارجاع به:ویژگی mask-type CSS