ویژگی mask-type CSS

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

mask-type این ویژگی مشخص می‌کند که عنصر <mask> SVG به عنوان ماسک نورانی یا ماسک alpha پردازش می‌شود.

این ویژگی برای عنصر <mask> SVG خود مناسب است.

مثال

دو عناصر <mask> SVG را مشاهده کنید؛ یکی از mask-type: alpha، و دیگری از mask-type: luminance:

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  </defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
    <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

آزمایش کنید

نوشتار CSS

mask-type: luminance|alpha|initial|inherit;

مقدار ویژگی

مقدار توضیح
نورانی این تصویر ماسک را به عنوان ماسک نورانی در نظر می‌گیرد. مقدار پیش‌فرض.
alpha این تصویر ماسک را به عنوان ماسک alpha در نظر می‌گیرد.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. لطفاً به: مراجعه کنید initial.
erbیت‌پذیری این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به: مراجعه کنید erbیت‌پذیری.

جزئیات فنی

مقدار پیش‌فرض: نورانی
erbیت‌پذیری: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: محدوده 1 ماژول ماسک CSS
نوشتار جاوااسکریپت: object.style.maskType="alpha"

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

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

کروم ایج فایرفاکس سفاری اپرا
24 79 35 7 15

صفحات مرتبط

آموزش:پوشش CSS

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

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

ارجاع:ویژگی mask-composite CSS

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

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

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

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

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

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