CSS background-blend-mode প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড লেয়ার ব্লেন্ডিং করুন

background-blend-mode প্রোপার্টি একাধিক ব্যাকগ্রাউন্ড লেয়ার (ইমেজ, গ্রেডিয়েন্ট, রঙ) এর মাঝপথে ব্লেন্ডিং মোড (মিশ্রণ পদ্ধতি) সেট করে।

উদাহরণ

নিচের কোডটি চালিয়ে background-blend-mode প্রোপার্টির ব্যবহার দেখুন (মোড: darken):

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #myDIV { 
        width: 250px; 
        height: 170px; 
        background-repeat: no-repeat, repeat; 
        background-image: url("https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"), url(https://www.tutorialspoint.com/latest/dc.js.png); 
        background-blend-mode: darken; 
      } 
    </style> 
  </head> 
  </body> 
    <h1>Set Blend Mode</h1> 
    <div id="myDIV"></div> 
  </body> 
</html>

ব্যাখ্যা: দুটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা হয়েছে। background-blend-mode: darken প্রতিটি পিক্সেলে দুটি লেয়ারের রঙের মাঝে গাড় রঙটি বেছে নেয়। অন্যান্য জনপ্রিয় মোড: multiply, screen, overlay, color-dodge, luminosity ইত্যাদি। mix-blend-mode এলিমেন্টের কন্টেন্ট এবং ব্যাকগ্রাউন্ড মিশ্রণ করে।