خاصية وضع مزج الخلفية
آخر تحديث: 2026-09-13
background-blend-mode خاصية وضع مزج الخلفية
تضبط الخاصية background-blend-mode وضع المزج بين صور الخلفية لعنصر ما، وبين صور الخلفية ولون الخلفية. تدعم أوضاعًا مثل multiply وscreen وoverlay، بما يشبه مزج الطبقات في Photoshop. أُضيفت في CSS3 وهي ممتازة لتأثيرات بصرية غنية.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
background-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 |
|---|---|---|---|---|---|
| background-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： اضبط أوضاع مزج متعددة مفصولة بفواصل لتطابق صور خلفية متعددة، مثلًا background-blend-mode: multiply, screen;.
تحذير： لا يمزج background-blend-mode العنصر مع محتوى الصفحة الآخر؛ استخدم mix-blend-mode لإجراء المزج بين العناصر.
❓ الأسئلة الشائعة
Qما الفرق بين background-blend-mode وmix-blend-mode؟
Aيمزج background-blend-mode طبقات الخلفية الخاصة بالعنصر — صور الخلفية مع بعضها ومع لون الخلفية. أما mix-blend-mode فيمزج العنصر نفسه مع محتوى الصفحة الموجود تحته. يعمل الأول على طبقات الخلفية الداخلية للعنصر؛ ويعمل الثاني بين العنصر ككل وبقية الصفحة. ولتعبير صورة خلفية لزيادة وضوح النص، يكفي استخدام background-blend-mode.
Qما أوضاع المزج الأكثر استخدامًا؟
Aيضرب multiply الألوان ويُعتِم النتيجة، وهو ممتاز لفرض درجات لونية داكنة على أنسجة فاتحة أو لتعتيم خلفية لزيادة وضوح النص. أما screen فتُفاتِح ومناسبة لتأثيرات التوهج. وoverlay يجمع بينهما لرفع التباين. بينما تختار darken/lighten الأطراف لكل قناة، ويخلق difference تأثيرات عكسية إبداعية. بشكل عام، النتائج شبيهة بمزج طبقات Photoshop.
Qما القيم التي يدعمها background-blend-mode؟
Aتدعم 16 قيمة: normal وmultiply وscreen وoverlay وdarken وlighten وcolor-dodge وcolor-burn وhard-light وsoft-light وdifference وexclusion وhue وsaturation وcolor وluminosity.
Qكيف أعتّم صورة خلفية بالمزج لتبقى النصوص مقروءة؟
Aاستخدم multiply مع لون خلفية داكن: background-image: url(bg.jpg); background-color: rgba(0,0,0,.5); background-blend-mode: multiply;. يؤدي الضرب باللون الداكن إلى تعتيم الصورة ورفع تباين النص. لا يدعم IE المزج، لذا احتفظ بلون خالص كبديل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
