صفت 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

[html]div{background-blend-mode:normal;}[/html]

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

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

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

[html]div{background-blend-mode:multiply;}[/html]

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

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

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

[html]div{background-blend-mode:screen;}[/html]

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

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

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

[html]div{background-blend-mode:overlay;}[/html]

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

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

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

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

[html]div{background-blend-mode:darken;}[/html]

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

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

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

[html]div{background-blend-mode:lighten;}[/html]

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

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

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

[html]div{background-blend-mode:color-dodge;}[/html]

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

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

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

[html]div{background-blend-mode:saturation;}[/html]

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

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

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

[html]div{background-blend-mode:color;}[/html]

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

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

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

[html]div{background-blend-mode:luminosity;}[/html]

بررسی خاصیت background-blend-mode از نظر نسخه زبان طراحی سی اس اس

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

بررسی ساختاری خصوصیت background-blend-mode


عناوین ساختاری خاصیت background-blend-mode	وضعیت ساختاری خاصیت background-blend-mode
مقدار پیش فرض	normal
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.backgroundBlendMode="screen