বৈশিষ্ট্য background-blend-mode

বৈশিষ্ট্য background-blend-mode পটভূমির ছবির উপর পটভূমির রঙ বা অন্যান্য ছবির সম্মিলনের মোড নির্ধারণ করে। এই বৈশিষ্ট্যে কমা দ্বারা পৃথক করে একাধিক মানও উল্লেখ করা যেতে পারে, যা একই ক্রমে প্রয়োগ করা হবে। বৈশিষ্ট্যের মানগুলি গ্রাফিক সম্পাদকগুলির প্রধান মোডগুলির অনুরূপ।

সিনট্যাক্স

cssসিলেক্টর {
  background-blend-mode: মোড;
}

বৈশিষ্ট্য background-blend-mode-এর জন্য প্রধান মানগুলি নিচের টেবিলে উপস্থাপন করা হয়েছে:

মানসমূহ

উদাহরণ

আসুন দেখি background-blend-mode বৈশিষ্ট্যের ডিফল্ট মান সহ একটি ছবি কেমন দেখাবে:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

এবং এখন background-blend-mode বৈশিষ্ট্যের মান গুণনে পরিবর্তন করা যাক:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

আসুন আমাদের ছবির জন্য স্ক্রীন মোড সেট করি:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

আরও দেখুন