خصائص backdrop-filter CSS

التعريف والاستخدام

backdrop-filter الخصائص تُستخدم لتطبيق تأثيرات رسومية خلف العنصر.

نصيحة:لرؤية التأثير، يجب أن يكون العنصر أو خلفيته شفافًا على الأقل جزءًا.

مثال

إضافة تأثيرات رسومية خلف العنصر:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

جرب بنفسك

جملة CSS

backdrop-filter: لا شيء|مصفى|مبدئي|تنقل;

قيمة الخصائص

القيمة الوصف
لا شيء القيمة الافتراضية. لا تطبق أي فلاتر على الخلفية.
مصفى

قائمة الوظائف من فلاتر منفصلة بفواصل الفراغات، مثل:

  • blur
  • سطوع
  • مقارنة
  • drop-shadow
  • grayscale
  • هواء-تحويل
  • عكس
  • شفافية
  • sepia
  • ساتوريت

أو أتجه إلى عنوان URL لمصفى SVG.

مبدئي ضع هذا الخصائص في قيمته الافتراضية. راجع مبدئي.
تنقل من خلال تنقل من العنصر الأب لتنقل هذا الخصائص. راجع تنقل.

تفاصيل التقنية

القيمة الافتراضية: لا شيء
تنقل: لا
صنع التحرك: دعم. راجع:خصائص المتحرك.
الإصدار: CSS3
جافا سكربت الجملة: object.style.backdropFilter="grayscale(100%)"

دعم المتصفح

الرقم في الجدول هو إصدار أول من يدعم هذا الخصائص بالكامل.

الرقم الذي يحتوي على -webkit- هو إصدار أول من يدعم هذا المقدار.

كروم إدج فايرفوكس سفاري أوبرا
76 79 103 9 -webkit- 63

صفحات ذات الصلة

دليل:صور CSS

مرجع:خصائص filter CSS

مرجع:HTML DOM filter 属性