<blend-mode>

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

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

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

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

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

normal

 

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

 

MULTIPLY

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


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

 
multiply

 

SCREEN

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


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

 
screen

 

OVERLAY

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


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

 
overlay

 

DARKEN

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


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

 
darken

 

LIGHTEN

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

 


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

 
lighten

 

COLOR DODGE

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

 


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

 
color-dodge

 

COLOR BURN

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


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

 
 color-burn

 

HARD LIGHT

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

 


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

 
hard-light

 

SOFT LIGHT

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

 


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

 
soft-light

 

DIFFERENCE

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

 


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

 
difference

 

EXCLUSION

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

 


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

 
exclusion

 

HUE

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


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

 
hue

 

SATURATION

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


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

 
saturation

 

COLOR

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

 


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

 
color

 

luminosity

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

 


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

 
luminosity

یک دیدگاه برای “<blend-mode>

  1. نه برای css بلکه برای خود فتوشاپ هم من دقیقا نمی‌دونستم این مدها چیکار می‌کنن. از روی اسم می‌شد حدس‌هایی زد و با امتحان کردنشون اونی که به کار می‌آد انتخاب کرد ولی فهمیدن منطق پشتشون جالب بود.

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *