از ویژگی mix-blend-mode برای مشخص کردن حالت blend-mode در مورد آمیختن یک عنصر با محتوای پشت سر آن (backdrop) استفاده می شود.
اول چند مفهوم را با استفاده از تصویر زیر بررسی می کنیم:
source عنصر مورد نظر ما می باشد که می خواهیم ویژگی mix-blend-mode را بر روی آن اعمال کنیم.
destination عنصر و یا عناصر پشت سر source هستند که قسمتی از آنها با source اشتراک یا هم پوشی دارد.
به آن قسمت مشترک که قرار است عملیات آمیختن رنگ ها در آنجا انجام شود backdrop می گویند.
با استفاده از mix-blend-mode می توانید هر دو عنصری را با هم ترکیب کنید. مثلا یک متن را می توانید با هر چیزی ترکیب کنید(مثلا یک تصویر) و یا یک تصویر را با یک تصویر دیگر و یا هدر ثابت شده را با عناصر پشت سرش که در حال اسکرول شدن هستند و غیره.
در ضمن اگر به دنبال این هستید که رنگ پس زمینه یک عنصر را با تصویر پس زمینه آن و یا تصاویر پس زمینه یک عنصر را با هم بیامیزید باید از background-blend-mode استفاده کنید.
قبل از بررسی هرگونه مثال باید با تمام مدل های آمیختن رنگ آشنا باشید پس بهتر است مطلب blend-mode را مطالعه کنید.
در اولین مثال عنصر <h1> بر روی یک عنصر تصویر قرار داده شده است و با آن ترکیب شده است. همچنین خود تصویر با رنگ پس زمینه <body> آمیخته شده است.
<body>
<div class="container">
<img src="scene.jpg" alt="Bird image.">
<h1>Breathe</h1>
</div>
</body>
body {
background-color: #eee;
}
img {
mix-blend-mode: luminosity;
}
h1 {
mix-blend-mode: difference;
}
نتیجه بصورت زیر خواهد بود:
همانطور که گفته شده دو عنصر تصویر را هم می توانید با هم ترکیب کنید. در مثال زیر این موضوع به نمایش گذاشته شده است:
همینطور اگر دو عنصر متنی را بوسیله این ویژگی و با مقدار difference با هم ترکیب کنید می توانید خروجی مانند تصویر زیر داشته باشید:
دموی زیر که شامل مثال های بالا است را با دقت بررسی کرده و با تغییر مقادیر ویژگی های مختلف به درک بهتر موضوع کمک کنید.
See the Pen mix-blend-mode by Mojtaba Seyedi (@seyedi) on CodePen.
تست و دموی آنلاین
به آدرس زیر رفته و از ابزار آماده شده توسط Jonathan Cutrell برای تست بیشتر این ویژگی استفاده کنید:
سلام
در مورد ادغام عکس پرنده و طبیعت
اگر یک عکس پرنده و دو عکس طبیعت داشته باشیم و عکس های طبیعت رو به ترتیب مقدار mix-blend-mode شون رو برابر darken , overly قرار بدیم نتیجه بهتری میگیریم.
موفق باشید
سلام. مرسی بابت پیشنهاد خوبتون. اگر یک دمو توی سایت codepen.io و یا jsbin.com درست کنید و لینکش رو اینجا قرار بدین خیلی خوب میشه. چون بقیه هم می بینند. ممنون