خاصية مرشح الخلفية
آخر تحديث: 2026-09-13
backdrop-filter خاصية مرشح الخلفية
تطبّق الخاصية backdrop-filter تأثيرات مرشّح (مثل blur أو brightness) على المنطقة خلف العنصر، وهي الطريقة القياسية لإنشاء تأثيرات الزجاج المصنفر. على عكس filter، تؤثر في المحتوى الموجود أسفل العنصر لا في العنصر نفسه. دعم المتصفحات الحديثة جيد، لكن يجب أن يكون خلفية العنصر شفافًا جزئيًا على الأقل لتظهر التأثير.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | filter |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
backdrop-filter: none | <filter-function>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون مرشح خلفية |
<filter-function> | النوع | تأثير ضبابية/مرشح الخلفية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| backdrop-filter | ✓ v79 | ✓ v79 | ✓ v103 | ✓ v9 | ✓ v66 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يحتاج backdrop-filter إلى خلفية عنصر شفافة أو شبه شفافة لكي يظهر المحتوى المُرشَّح خلفه.
مهم： الفرق عن filter: يتأثر العنصر نفسه بـ filter، بينما يتأثر المحتوى خلف العنصر بـ backdrop-filter.
❓ الأسئلة الشائعة
Qما الفرق بين backdrop-filter وfilter؟
Aيُطبَّق filter على العنصر نفسه وعلى النتيجة المُصيَّرة لأبنائه. أما backdrop-filter فيُطبَّق على المحتوى "الذي يشفّ" خلف العنصر — يُرشِّح طبقة الخلفية دون لمس نص العنصر ومحتواه. الاستخدام النموذجي هو شريط تنقّل زجاجي مصنجر بـ backdrop-filter: blur(10px)، الذي يحتاج خلفية شبه شفافة لكي يظهر. يمكن الجمع بينهما، وكلاهما يُنشئ سياق تكديس (stacking context).
Qما دعم المتصفحات لـ backdrop-filter؟
Aتدعمه المتصفحات الحديثة على نطاق واسع: Chrome 76+ وEdge 76+ وFirefox 103+ (مفعّل افتراضيًا) وSafari 9+ (مع بادئة -webkit-). اكتب كلًا من -webkit-backdrop-filter وbackdrop-filter. لا يدعمه IE، ويحتاج العنصر إلى خلفية شبه شفافة لظهور التأثير.
Qلماذا لا يعمل تأثير الزجاج المصنفر لديّ؟
Aالأسباب الشائعة: خلفية العنصر معتمة تمامًا (مثلًا background: #fff) فتغطي المحتوى خلفه؛ أو ينقص بادئة -webkit- فيتجاهلها Safari القديم؛ أو المتصفح لا يدعمه (IE)؛ أو ببساطة لا يوجد شيء خلف العنصر لتمويهه. الإعداد الصحيح هو خلفية شبه شفافة مثل rgba(255,255,255,0.3) مع محتوى حقيقي خلفها.
Qما دوال المرشّح التي يدعمها backdrop-filter؟
Aنفس مجموعة filter: blur() وbrightness() وcontrast() وgrayscale() وsepia() وhue-rotate() وinvert() وsaturate() وopacity() وdrop-shadow()، ويمكن الجمع بينها بمسافات. يُعد الزجاج المصنفر مع رفع التشبع (saturation) توافقًا شائعًا في أشرطة التنقل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
