أوضاع الدمج

الثنائية اللون هي معالجة ألوان شائعة في مجال التصوير الفوتوغرافي، وتجعل الصورة تبدو كما لو كانت تتألف من لونَين متناقضَين فقط: أحدهما للعناصر البارزة والآخر للعناصر المنخفضة الإضاءة. كيف يمكنك إجراء ذلك باستخدام CSS؟

باستخدام أوضاع المزج والأساليب الأخرى التي تعرّفت عليها، مثل الفلاتر و العناصر الزائفة، يمكنك تطبيق هذا التأثير على أي صورة.

ما هو وضع المزج؟

تُستخدَم أوضاع المزج بشكل شائع في أدوات التصميم، مثل Photoshop، لإنشاء تأثير تركيبي من خلال مزج ألوان من طبقتَين أو أكثر. من خلال تغيير طريقة مزج الألوان، يمكنك الحصول على تأثيرات مرئية مثيرة للاهتمام. يمكنك أيضًا استخدام أوضاع المزج كأداة مفيدة، مثل عزل صورة ذات خلفية بيضاء، لتبدو وكأنها ذات خلفية شفافة.

يمكنك استخدام معظم أوضاع المزج المتاحة في أداة تصميم مع CSS، باستخدام خصائص mix-blend-mode أو background-blend-mode. يطبّق mix-blend-mode الدمج على عنصر كامل ويطبّق background-blend-mode الدمج على خلفية عنصر.

استخدِم background-blend-mode عندما يكون لديك خلفيات متعدّدة على عنصر وتريد دمجها مع بعضها.

يؤثر mix-blend-mode في العنصر بأكمله، بما في ذلك العناصر الزائفة. يتمثل أحد حالات الاستخدام في المثال الأوّلي لصورة ثنائية اللون، التي تحتوي على طبقات ألوان تم تطبيقها على العنصر من خلال العناصر الزائفة.

تنقسم أوضاع المزج إلى فئتين: قابلة للفصل وغير قابلة للفصل. يأخذ وضع المزج القابل للفصل كل مكوّن لون، مثل RGB، في الاعتبار بشكلٍ فردي. يأخذ وضع المزج غير القابل للفصل في الاعتبار جميع مكونات الألوان بالتساوي.

توافُق المتصفح

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

أوضاع الدمج القابلة للانفصال

عادي

هذا هو وضع المزج التلقائي ولا يغيّر أي شيء في كيفية امتزاج عنصر مع عناصر أخرى.

ضرب

يشبه وضع المزج multiply تجميع عدة شفافيات فوق بعضها. ستظهر وحدات البكسل البيضاء شفافة، وستظهر وحدات البكسل السوداء سوداء. وسيؤدي أي شيء بينهما إلى ضرب قيم الإضاءة (الضوء). وهذا يعني أنّ الإضاءة تصبح أكثر سطوعًا والظلام أكثر قتامة، ما يؤدي في أغلب الأحيان إلى نتيجة أكثر قتامة.

.my-element {
  mix-blend-mode: multiply;
}

الشاشة

يؤدي استخدام screen إلى ضرب قيم الإضاءة، وهو تأثير معاكس لتأثير multiply، وغالبًا ما يؤدي إلى نتيجة أكثر سطوعًا.

.my-element {
  mix-blend-mode: screen;
}

ألوان مركّبة

يجمع وضع المزج هذا، وهو overlay، بين multiply وscreen. تصبح الألوان الأساسية الداكنة أكثر قتامة وتصبح الألوان الأساسية الفاتحة أكثر سطوعًا. ولا تتأثر الألوان متوسطة الدرجة، مثل الرمادي بنسبة 50%.

.my-element {
  mix-blend-mode: overlay;
}

تعتيم

يقارن وضع المزج darken مستوى الإضاءة للألوان الداكنة في كلّ من الصورة المصدر وصورة الخلفية ويختار اللون الأكثر قتامة. ويتم ذلك من خلال مقارنة قيم rgb بدلاً من الإضاءة (مثلما تفعل multiply وscreen)، لكل قناة لون. باستخدام darken وlighten، يتم غالبًا إنشاء قيم ألوان جديدة من عملية المقارنة هذه.

.my-element {
  mix-blend-mode: darken;
}

تفتيح

يؤدي استخدام lighten إلى العكس تمامًا من darken.

.my-element {
  mix-blend-mode: lighten;
}

توزيع كثافة الألوان

في حال استخدام color-dodge، يتم تفتيح لون الخلفية ليعكس اللون المصدر. لا يتأثّر اللون الأسود الخالص بهذا الوضع.

.my-element {
  mix-blend-mode: color-dodge;
}

حرق اللون

يشبه وضع المزج color-burn إلى حد كبير وضع المزج multiply، ولكنه يزيد من التباين، ما يؤدي إلى زيادة درجات الألوان المتوسطة التشبع وخفض درجات الألوان الساطعة.

.my-element {
  mix-blend-mode: color-burn;
}

الإضاءة القوية

يؤدي استخدام hard-light إلى إنشاء تباين حيوي. يعمل وضع المزج هذا على تمرير قيم الإضاءة أو ضربها. إذا كانت قيمة البكسل أفتح من 50% من الرمادي، يتم تفتيح الصورة، كما لو تم فحصها. إذا كان أكثر قتامة، يتم مضاعفة هذا العدد.

.my-element {
  mix-blend-mode: hard-light;
}

ضوء ناعم

وضع المزج soft-light هو نسخة أقل حدة من overlay. ويعمل هذا الأسلوب بالطريقة نفسها تقريبًا مع تباين أقل.

.my-element {
  mix-blend-mode: soft-light;
}

الفرق

لفهم آلية عمل difference، يمكنك الاطّلاع على طريقة عمل الصورة السلبية. يأخذ وضع المزج difference قيمة الفرق لكل بكسل، ويقلب الألوان الفاتحة. إذا كانت قيم الألوان متطابقة، تصبح سوداء. سيتم عكس الاختلافات في القيم.

.my-element {
  mix-blend-mode: difference;
}

استبعاد

يشبه استخدام exclusion استخدام difference كثيرًا، ولكن بدلاً من عرض اللون الأسود للبكسل المتطابق، سيعرض اللون الرمادي بنسبة% 50، ما يؤدي إلى عرض صورة أكثر نعومة وبدرجة تباين أقل.

.my-element {
  mix-blend-mode: exclusion;
}

أوضاع الدمج غير القابلة للانفصال

يمكنك اعتبار أوضاع المزج هذه مثل مكوّنات اللون في HSL. ويأخذ كلّ منها قيمة مكوّن معيّنة من الطبقة النشطة ويمزجها مع قيم المكوّنات الأخرى.

تدرج اللون

يأخذ وضع المزج hue درجة لون اللون المصدر ويطبّقها على تشبع لون الخلفية ودرجة سطوعه.

.my-element {
  mix-blend-mode: hue;
}

تشبع اللون

يعمل هذا الوضع مثل hue، ولكن باستخدام saturation كوضع دمج، يتم تطبيق تشبع اللون المصدر على درجة لون لون الخلفية ودرجة سطوعه.

.my-element {
  mix-blend-mode: saturation;
}

اللون

سيؤدي وضع المزج color إلى إنشاء لون من درجة لون اللون المصدر وتشبّعه ومعدّل سطوع لون الخلفية.

.my-element {
  mix-blend-mode: color;
}

السطوع

أخيرًا، luminosity هو معكوس color. وينشئ هذا المزيج لونًا يجمع بين سطوع اللون المصدر ونغمته وتشبّعه.

.my-element {
  mix-blend-mode: luminosity;
}

سمة isolation

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

إذا ضبطت سمة isolation لتكون قيمتها isolate، سيؤدي ذلك إلى إنشاء سياق تجميع جديد، سيمنعه من الدمج مع طبقة الخلفية. كما تعلمت في وحدة "فهرس z"، عند إنشاء سياق تجميع جديد، تصبح هذه الطبقة هي الطبقة الأساسية. وهذا يعني أنّ أوضاع الدمج على مستوى العنصر الرئيسي لن تعود سارية، ولكن يمكن لا يزال دمج العناصر داخل عنصر تم ضبطه على isolation: isolate.

يُرجى العِلم أنّ هذا الإجراء لا يعمل مع background-blend-mode لأنّ سمة الخلفية معزولة من قبل.

التحقّق من فهمك

اختبِر معلوماتك حول أوضاع المزج

أي مما يلي هي أوضاع دمج CSS؟

الفرق
ضرب
ألوان مركّبة
Dullen
زيادة السطوع
تفتيح

إذا كنت تريد دمج ألوان مختلفة بطرق مختلفة، ما هو نمط وضع الدمج الذي تحتاجه؟

غير قابلة للفصل
قابل للفصل