background-blend-mode

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

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

 

فرض کنید می خواهیم رنگ پس زمینه یک عنصر را با حالت luminosity با تصویر پس زمینه اش ترکیب کنیم, داریم:

 


.element {
  background-image: url(blend-mode-example.jpg);
  background-color: #51B7D3;
  background-blend-mode: luminosity;
}

 

نتیجه بصورت زیر خواهد بود:

 
مثال برای background-blend-mode
 

 
همینطور برای ترکیب دو تصویر پس زمینه در یک عنصر, کافی است بصورت زیر عمل کنید. تصاویر می توانند گرادینت و یا تصاویر حقیقی باشند:

 


.element {
  background-image: linear-gradient(to right, #69B62F, #DE3375), url(blend-mode-example.jpg);
  background-blend-mode: overlay;
}

 
تصویر زیر نتیجه را نشان می دهد:
 
 background-blend-mode

 
اگر از چند تصویر در پس زمینه استفاده می کنید توجه داشته باشید که همانطور که آدرس تصاویر را بصورت لیستی که با ویرگول از هم جدا شده اند می نویسید, حالت های blend-mode را هم اگر می خواهید متفاوت باشند باید به همین صورت با ویرگول از هم جدا کنید. لایه های متفاوت می توانند رنگ, گرادینت و یا تصویر باشند.

 
دموی زیر شامل دو مثال بالا و همچنین یک مثال دیگر که ترکیب دو تصویر در پس زمینه هستند, می باشد:

 

See the Pen background-blend-mode by Mojtaba Seyedi (@seyedi) on CodePen.


 

تست و دموی آنلاین

با استفاده از ابزار ساخته شده در این سایت قادر به تست و بررسی این ویژگی خواهید بود:

ناگفته نماند که این ابزار بازسازی شده این دمو می باشد.

پشتیبانی مرورگرها

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