خاصية Filter
آخر تحديث: 2026-09-13
filter خاصية Filter
تطبّق خاصية filter تأثيرات رسومية على العنصر — مثل التمويه والسطوع والتباين والرمادي — تشبه مرشّحات Photoshop. تعمل على المخرجات المرسومة للعنصر وتؤثر على العنصر وجميع عناصره الفرعية، مما يجعلها أداة شائعة لمعالجة الصور والتأثيرات البصرية.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
filter: none | <filter-function>+;
/* <filter-function> = blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون مرشّح |
<filter-function> | النوع | blur و brightness و contrast و drop-shadow و grayscale و hue-rotate و invert و opacity و saturate و sepia أو url() |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| filter | ✓ v53 | ✓ v12 | ✓ v35 | ✓ v9.1 | ✓ v40 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يمكن استخدام عدة دوال مرشّح دفعة واحدة، مفصولة بمسافات، وتُطبَّق بالترتيب.
تحذير： يؤثر filter على العنصر وجميع عناصره الفرعية؛ وإذا كنت تريد فقط تمويه الخلفية دون التأثير على المحتوى الأمامي، استخدم backdrop-filter.
❓ الأسئلة الشائعة
Qكل من filter و opacity يمكنهما ضبط الشفافية — ما الفرق؟
Aلا يضبط opacity سوى شفافية العنصر الكلية ويُنشئ سياق تكديس (stacking context). أما filter: opacity(50%) فهو حلقة ضمن سلسلة مرشّحات ويمكن دمجه مع مرشّحات أخرى مثل blur أو saturate. كلاهما يُطلق تركيب GPU، ولكن لـ opacity مسار تحسين مخصص — يُفضَّل opacity البسيط لتغييرات الشفافية البسيطة، واستخدم filter للتأثيرات المركّبة.
Qهل تؤثر خاصية filter في CSS على أداء العرض ومعدل الإطارات FPS؟
Aنعم. تُطلق المرشّحات المكلفة مثل blur() و drop-shadow() حسابات بكسلية ثقيلة ويمكن أن تُسقط الإطارات عند وجود عناصر كثيرة أو على الأجهزة الضعيفة؛ أما السطوع والتباين والتشبع فهي أرخص نسبياً. التوصيات: طبّق المرشّحات بشكل ثابت أو عند المرور فقط، وتجنّب تمويه عدة عناصر كبيرة دفعة واحدة، واستخدم صوراً مجهّزة مسبقاً بدل المرشّحات الحية عند الحاجة الحرجة، واختبر على الأجهزة المستهدفة.
Qما الفرق بين filter و backdrop-filter في CSS؟
Aيُطبَّق filter على العنصر نفسه وكل محتواه — مثل تمويه صورة كاملة. أما backdrop-filter فيُطبَّق على المحتوى خلف العنصر، مُنتجاً تأثير زجاج مصنفر، يُستخدم عادةً في أشرطة التنقل وخلفيات النوافذ المنبثقة مع بقاء النص الأمامي حاداً. يتمتع backdrop-filter بدعم متصفحات أضعف قليلاً وتكلفة أداء أعلى، وغالباً ما يُدمجان معاً لطبقات واجهة دقيقة.
Qكيف أجعل الصورة رمادية وأستعيد اللون عند المرور؟
Aاستخدم grayscale(): اضبط filter: grayscale(100%) افتراضياً وبدّل إلى grayscale(0) أو none عند المرور، ثم أضف transition: filter 0.3s للحصول على تغيّر لون سلس. يُستخدم هذا التفاعل الشائع جداً من الرمادي إلى اللون في صفحات التأبين والصور الرمزية المعطّلة وتأثيرات المرور على جدران الصور، وتكلفته التنفيذية شبه معدومة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
