صفت background-blend-mode در css ترکیب رنگ پس زمینه

صفت background-blend-mode در css ترکیب رنگ پس زمینه

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی background-blend-mode در زبان css توضیحاتی را ارائه نماییم.

ویژگی background-blend-mode در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

معرفی و کاربرد ویژگی background-blend-mode در زبان طراحی سی اس اس

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

مقادیر خاصیت background-blend-mode در زبان طراحی css

صفت جدید background-blend-mode که در زبان طراحی CSS3 معرفی شده است، 10 مقدار می پذیرد که عبارتند از:

مقدار normal
مقدار multiply
مقدار screen
مقدار overlay
مقدار darken
مقدار lighten
مقدار color-dodge
مقدار saturation
مقدار color
مقدار luminosity

مقدار normal درون خاصیت background-blend-mode در زبان سی اس اس

اگر خاصیت background-blend-mode را برابر با مقدار normal قرار دهیم، در این حالت می توانیم ترکیب رنگ پس زمینه را برای تگ html مربوطه در وضعیت نرمال تعیین کنیم.

این مقدار به عنوان مقدار پیش فرض ویژگی background-blend-mode می باشد.

مثال براساس مقدار normal برای خاصیت background-blend-mode

div{background-blend-mode:normal;}

1	div{background-blend-mode:normal;}

مقدار multiply درون خاصیت background-blend-mode در زبان css

اگر خاصیت background-blend-mode را برابر با مقدار multiply قرار دهیم، رنگ هر پیکسل تصویر و رنگ پس زمینه به شکل متناظر در هم ضرب می شود و یک رنگ جدید برای همان پیکسل در تگ html مربوطه بدست می آید.

مثال براساس مقدار multiply برای خاصیت background-blend-mode

div{background-blend-mode:multiply;}

1	div{background-blend-mode:multiply;}

مقدار screen درون خاصیت background-blend-mode در زبان سی اس اس

اگر خاصیت background-blend-mode را برابر با مقدار screen قرار دهیم، رنگ هر پیکسل تصویر و رنگ پس زمینه در هم ضرب شده و در تگ html مربوطه معکوس می شوند.

مثال براساس مقدار screen برای خاصیت background-blend-mode

div{background-blend-mode:screen;}

1	div{background-blend-mode:screen;}

مقدار overlay درون خاصیت background-blend-mode در زبان css

اگر خاصیت background-blend-mode را برابر با مقدار overlay قرار دهیم، می توانیم ترکیبی از دو مقدار screen و multiply را در تگ html مربوطه تعیین نماییم.

مثال براساس مقدار overlay برای خاصیت background-blend-mode

div{background-blend-mode:overlay;}

1	div{background-blend-mode:overlay;}

صفت background-blend-mode در css ترکیب رنگ پس زمینه

مقدار darken درون خاصیت background-blend-mode در زبان سی اس اس

اگر خاصیت background-blend-mode را برابر با مقدار darken قرار دهیم، هر پیکسل رنگ پس زمینه با پیکسل متناظر تصویر مقایسه می شود. و هر کدام از رنگ ها که تیره تر باشد انتخاب شده و درون پیکسل تگ html مربوطه قرار می گیرد.

مثال براساس مقدار darken برای خاصیت background-blend-mode

div{background-blend-mode:darken;}

1	div{background-blend-mode:darken;}

مقدار lighten درون خاصیت background-blend-mode در زبان css

اگر خاصیت background-blend-mode را برابر با مقدار lighten قرار دهیم، هر پیکسل رنگ پس زمینه با پیکسل متناظر تصویر مقایسه می شود. و هر کدام از رنگ ها که روشن تر باشد انتخاب شده و درون پیکسل تگ html مربوطه قرار می گیرد.

مثال براساس مقدار lighten برای خاصیت background-blend-mode

div{background-blend-mode:lighten;}

1	div{background-blend-mode:lighten;}

مقدار color-dodge درون خاصیت background-blend-mode در زبان سی اس اس

اگر خاصیت background را برابر با مقدار color-dodge قرار دهیم، پیکسل رنگ پس زمینه بر پیکسل رنگ تصویر در تگ html مربوطه معکوس شده و تقسیم می شود.

مثال براساس مقدار color-dodge برای خاصیت background-blend-mode

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