خاصية Mix-blend-mode
آخر تحديث: 2026-09-13
mix-blend-mode خاصية Mix-blend-mode
تتحكم خاصية mix-blend-mode في كيفية مزج محتوى العنصر لألوانه مع المحتوى الموجود أسفله (خلفية أو عناصر مجاورة)، تشبه أنماط دمج الطبقات في Photoshop. تتيح للنصوص والصور إنتاج مزج لوني غني على خلفية، وتُستخدم غالباً في الملصقات واللافتات وتصميم الصفحات الفني.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | كلمة مفتاحية | نمط الدمج |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| mix-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُجعل multiply اللون الأبيض شفافاً، لذا تندمج الشعارات البيضاء في خلفية ملوّنة؛ ويفعل screen العكس فيجعل الأسود شفافاً.
مهم： يعتمد الدمج على المحتوى الموجود أسفل العنصر. إذا كان العنصر داخل سياق تكديس خاص به دون أي شيء تحته، فلن يظهر أي تأثير دمج.
❓ الأسئلة الشائعة
Qما الفرق بين mix-blend-mode و background-blend-mode؟
Aيخلط mix-blend-mode محتوى العنصر (بما في ذلك خلفيته) مع كل ما تحته — وهو دمج عبر العناصر. أما background-blend-mode فيمزج فقط طبقات خلفية متعددة داخل نفس العنصر. استخدم mix-blend-mode لدمج النص مع صورة خلفية، واستخدم background-blend-mode لدمج عدة صور خلفية مع بعضها.
Qلماذا لا يظهر أي تأثير بصري لـ mix-blend-mode في CSS؟
Aالأسباب الشائعة: لا يوجد محتوى قابل للدمج أسفل العنصر؛ أو أن العنصر نفسه أو أحد الآباء يُنشئ سياق تكديس خاصاً يحدّ من نطاق الدمج؛ أو أن العنصر شفاف تماماً أو مغطى بالكامل بالمحتوى السفلي. أضف isolation: isolate إلى الأب لتعريف نطاق العزل صراحة، وتحقق من وجود محتوى قابل للدمج بالفعل في الأسفل.
Qمتى يجب أن أستخدم أنماط الدمج multiply و screen في CSS؟
Aيتعامل multiply بلطف مع الأبيض — يبقى الأبيض دون تغيير عند الدمج — لذا يناسب وضع علامة مائية لشعار أبيض فوق خلفية ملوّنة. ويفعل screen العكس: الأسود لا تأثير له، لذا يناسب وضع محتوى داكن فوق خلفية فاتحة. ومن الأنماط الشائعة الأخرى: overlay جيد لدمج النص مع الصور، و difference يمكنه إنشاء تأثيرات فنية لعكس الألوان.
Qما مدى دعم المتصفحات لـ mix-blend-mode، خاصة على الهواتف؟
Aتتمتع المتصفحات الحديثة على سطح المكتب (Chrome و Firefox و Safari و Edge) بدعم كامل منذ حوالي 2015، ولكن الإصدارات القديمة وبعض محركات WebView تختلف، وقد تغيب المزج أو تكون غير متسقة. على الهواتف، يدعم كل من iOS Safari و Chrome لنظام Android. للأغراض البصرية الحرجة، وفر بديلاً لا يعتمد على الدمج.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
