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;
}

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

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

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

 
تصویر زیر نتیجه را نشان می دهد:
 

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

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

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

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

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

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

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