<blend-mode>

از نوع داده ای <blend-mode> برای تعیین فرمول ترکیب کردن رنگ های یک عنصر با محتوای پشت سرش استفاده می شود.

به بیان دیگر blend-mode دو پیکسل که روی هم قرار دارند را گرفته و برای نمایش, به روشی آنها را با هم ترکیب و یا یکی از آنها را انتخاب می کند. مثلا در یکی از روش ها blend-mode از بین دو پیکسل, پیکسل تاریک تر را برای ترسیم انتخاب می کند.

در CSS برای استفاده از این قابلیت از ویژگی های background-blend-mode و mix-blend-mode استفاده می شود.

در اینجا برای بیان حالت های مختلف آمیختگی رنگ ها در قالب مثال از background-blend-mode استفاده می کنیم.

تصویر پس زمینه و رنگ مورد نظر زیر را نظر بگیرید:

 

حالت های مختلف آمیختگی رنگ ها به شرح زیر می باشند:

 

MULTIPLY

همانطور که از اسم این مقدار پیدا است پیکسل نهایی برای ترسیم از ضرب کردن دو پیکسلی که روی هم هستند به دست می آید. همیشه وقتی پیکسلی در سیاه ضرب می شود نتیجه رنگ سیاه خواهد بود و وقتی پیکسلی در سفید ضرب می شود نتیجه رنگ خود آن پیکسل خواهد بود. سیاه مثل صفر و سفید مثل یک در ضرب عمل می کنند. معمولا نتیجه multiply یک تصویر تاریک تر از خود تصویر خواهد بود.
 

.blend
{
  background-blend-mode: multiply;
}

 

 

SCREEN

برعکس مقادیر دو پیکسل را در هم ضرب می کند. screen نقطه مقابل multiply می باشد. وقتی با رنگ سفید استفاده شود نتیجه سفید خواهد بود و وقتی با رنگ سیاه استفاده شود نتیجه بی تغییر خواهد ماند. معمولا نتیجه screen تصویری روشن تر خواهد بود.
 

.blend
{
  background-blend-mode: screen;
}

 

 

OVERLAY

این فرمول ترکیبی از multiply و screen می باشد. در این روش بسته به رنگ پس زمینه قسمت های روشن, روشن تر و قسمت های تاریک, تاریک تر می شوند.
 

.blend
{
  background-blend-mode: overlay;
}

 

 

DARKEN

از بین دو پیکسلی که روی هم قرار دارند پیکسل تاریک تر را انتخاب می کند.
 

.blend
{
  background-blend-mode: darken;
}

 

 

LIGHTEN

از بین دو پیکسلی که روی هم قرار دارند پیکسل روشن تر را انتخاب می کند.

 

.blend
{
  background-blend-mode: lighten;
}

 

 

COLOR DODGE

لایه رنگی زیرین را روشن می کند تا لایه رنگی رویین آشکارتر شود. این عمل را با کاهش تضاد صورت می گیرد. اگر رنگ مورد نظر مشکی باشد تصویر تغییری نمی کند اما گر رنگ سفید باشد نتیجه نهایی سفید خالص خواهد بود.

 

.blend
{
  background-blend-mode: color-dodge;
}

 

 

COLOR BURN

این مقدار قطب مقابل color-dodge است. لایه رنگی زیرین را تاریک می کند و این عمل با با افزایش تضاد انجام می دهد. اگر رنگ مورد نظر سفید باشد تصویر تغییری نمی کند اما گر رنگ مشکی باشد نتیجه نهایی مشکی خالص خواهد بود.

.blend
{
  background-blend-mode: color-burn;
}

 

 

HARD LIGHT

این مقدار بسته به رنگ مورد نظر نتیجه را به حالت multiply و یا screen در می آید. اگر رنگ روشن از gray 50% باشد به حالت screen و روشن می شود و در غیر این صورت تصویر تاریک می شود.

 

.blend
{
  background-blend-mode: hard-light;
}

 

 

SOFT LIGHT

این متد شبیه hard-light است با این تفاوت که به جای استفاده از multiply و screen از color-dodge و color-burn استفاده می کند.

 

.blend
{
  background-blend-mode: soft-light;
}

 

 

DIFFERENCE

مقادیر دو پیکسل روی هم را بر هم تقسیم می کند تا مقداری مثبت بدست بیاید. وقتی رنگ مورد نظر سفید باشد تصویر معکوس می شود و اگر رنگ مشکی باشد تصویر تغییری نمی کند.

 

.blend
{
  background-blend-mode: difference;
}

 

 

EXCLUSION

مشابه به difference عمل می کند اما با تضاد رنگی کمتر.

 

.blend
{
  background-blend-mode: exclusion;
}

 

 

HUE

یک رنگ نهایی با استفاده از hue رنگ مورد نظر و saturation و luminance تصویر پس زمینه به وجود می آورد.
 

.blend
{
  background-blend-mode: hue;
}

 

 

SATURATION

یک رنگ نهایی با استفاده از saturation رنگ مورد نظر و hue و luminance تصویر پس زمینه به وجود می آورد.
 

.blend
{
  background-blend-mode: saturation;
}

 

 

COLOR

یک رنگ نهایی با استفاده از saturation و hue رنگ مورد نظر و luminance تصویر پس زمینه به وجود می آورد.

 

.blend
{
  background-blend-mode: color;
}

 

 

luminosity

یک رنگ نهایی با استفاده از luminance رنگ مورد نظر و hue و saturation تصویر پس زمینه به وجود می آورد.

 

.blend
{
  background-blend-mode: luminosity;
}