از نوع داده ای <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;
}
نه برای css بلکه برای خود فتوشاپ هم من دقیقا نمیدونستم این مدها چیکار میکنن. از روی اسم میشد حدسهایی زد و با امتحان کردنشون اونی که به کار میآد انتخاب کرد ولی فهمیدن منطق پشتشون جالب بود.