نوع البيانات <blend-mode>

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

نوع البيانات <blend-mode> في CSS يستعمل لوصف كيف يجب أن تمتزج الألوان عند تداخل طبقات الخلفات مع بعضها بعضًا. فكل بكسل من بكسلات الطبقة التي طُبِّق عليها نمط الامتزاج سيأخذ اللون من الخلفية ومن الأمامية، وستُجرى عملية حسابية عليه، ويُعاد لونٌ جديدٌ سيستخدم مكان تداخل الطبقات.

يجدر بالذكر أنَّ هذه القيمة تستعمل مع خاصيتَي background-blend-mode و mix-blend-mode.

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 35 30 غير مدعومة 22 7.1

القيم

يُحدِّد نمط الامتزاج باستخدام قيمة بسيطة.

normal

اللون النهائي هو اللون العلوي، بغض النظر عن خصائص اللون السفلي، والنتيجة النهائية هي صورتان مليئتان تتداخلان مع بعضهما بعضًا.

صورة توضِّح نمط الامتزاج normal.
صورة توضِّح نمط الامتزاج normal.

multiply

اللون النهائي هو ناتج ضرب اللونين العلوي والسفلي، فالطبقة ذات اللون الأسود تؤدي إلى جعل اللون النهائي أسود، والطبقة ذات اللون الأبيض لا تؤدي إلى أي تعديل؛ النتيجة النهائية تشبه ما يحدث عندما نضع صورتين مطبوعتين على فلم شفاف فوق بعضهما بعضًا.

صورة توضِّح نمط الامتزاج multiply.
صورة توضِّح نمط الامتزاج multiply.

screen

اللون النهائي هو ناتج قلب الألوان (invert) ثم ضربها ثم قلب القيمة الناتجة؛ أي أنَّ الطبقة السوداء لن يكون لها أي تأثير، والطبقة البيضاء ستؤدي إلى جعل اللون النهائي أبيض؛ والنتيجة النهائية تشبه ما يحدث عند تداخل الصورتين على شاشة إسقاط ضوئي.

صورة توضِّح نمط الامتزاج screen.
صورة توضِّح نمط الامتزاج screen.

overlay

اللون النهائي هو نتيجة القيمة multiply إذا كان اللون السفلي أغمق، أو screen إذا كان اللون السفلي أفتح؛ وهذا النمط مكافئ لنمط الامتزاج hard-light لكن مع تبديل الطبقات.

صورة توضِّح نمط الامتزاج overlay.
صورة توضِّح نمط الامتزاج overlay.

darken

اللون النهائي هو تجميع لأغمق القيم في كل قناة لونية (color channel) من الطبقتين.

صورة توضِّح نمط الامتزاج darken.
صورة توضِّح نمط الامتزاج darken.

lighten

اللون النهائي هو تجميع لأفتح القيم في كل قناة لونية (color channel) من الطبقتين.

صورة توضِّح نمط الامتزاج lighten.
صورة توضِّح نمط الامتزاج lighten.

color-dodge

اللون النهائي هو نتيجة قسمة اللون السفلي على مقلوب اللون العلوي؛ وإذا كان اللون الأمامي أسود فلن يؤدي إلى أي تغيير، وإذا كان لون الأمامية هو مقلوب لون الخلفية فسيؤدي إلى إظهار لون الخلفية كاملًا.

صورة توضِّح نمط الامتزاج color-dodge.
صورة توضِّح نمط الامتزاج color-dodge.

color-burn

اللون النهائي هو نتيجة قلب اللون السفلي ثم قسمة تلك القيمة على اللون العلوي ثم قلب القيمة النهائية؛ وإذا كان اللون الأمامي أبيض فلن يؤدي إلى تغيير، وإذا كان لون الأمامية هو مقلوب لون الخلفية فسيؤدي ذلك إلى إظهار اللون الأسود.

صورة توضِّح نمط الامتزاج color-burn.
صورة توضِّح نمط الامتزاج color-burn.

hard-light

اللون النهائي هو نتيجة القيمة multiply إذا كان اللون العلوي أغمق، أو screen إذا كان اللون العلوي أفتح؛ وهذا النمط مكافئ لنمط الامتزاج overlay لكن مع قلب الطبقات.

صورة توضِّح نمط الامتزاج hard-light.
صورة توضِّح نمط الامتزاج hard-light.

soft-light

اللون النهائي يشبه اللون النهائي الناتج عن نمط الامتزاج hard-light لكنه أخف شدِّةً.

صورة توضِّح نمط الامتزاج soft-light.
صورة توضِّح نمط الامتزاج soft-light.

difference

اللون النهائي هو نتيجة طرح اللون الأغمق (من بين لونَي الطبقتين) من اللون الأفتح؛ ولن يكون للطبقات السوداء أي تأثير، بينما الطبقات البيضاء تؤدي إلى قلب لون الطبقة الأخرى.

صورة توضِّح نمط الامتزاج difference.
صورة توضِّح نمط الامتزاج difference.

exclusion

اللون النهائي يشبه ناتج نمط الامتزاج difference لكنه أقلُ تباينًا.

صورة توضِّح نمط الامتزاج exclusion.
صورة توضِّح نمط الامتزاج exclusion.

hue

اللون النهائي له قيمة الدرجة اللونية (hue) للون العلوي، بينما يأخذ قيمة الإشباع (saturation) والإضاءة (luminosity) من اللون السفلي.

صورة توضِّح نمط الامتزاج hue.
صورة توضِّح نمط الامتزاج hue.

saturation

اللون النهائي له قيمة الإشباع (saturation) للون العلوي، بينما يأخذ قيمة الدرجة اللونية (hue) والإضاءة (luminosity) من اللون السفلي.

صورة توضِّح نمط الامتزاج saturation.
صورة توضِّح نمط الامتزاج saturation.

color

اللون النهائي له قيمة الدرجة اللونية (hue) والإشباع (saturation) للون العلوي، بينما يأخذ قيمة الإضاءة (luminosity) من اللون السفلي.

صورة توضِّح نمط الامتزاج color.
صورة توضِّح نمط الامتزاج color.

luminosity

اللون النهائي له قيمة الإضاءة (luminosity) للون العلوي، بينما يأخذ الدرجة اللونية (hue) والإشباع (saturation) من اللون السفلي.

هذا النمط مكافئ للنمط color لكن مع تبديل الطبقات.

صورة توضِّح نمط الامتزاج luminosity.
صورة توضِّح نمط الامتزاج luminosity.

مصادر ومواصفات