mix-blend-mode প্রপার্টি

mix-blend-mode প্রপার্টিটি ব্যাকগ্রাউন্ড কালার বা ব্যাকগ্রাউন্ড ইমেজের উপর সোর্স কালারের ব্লেন্ড মোড সেট করে। প্রপার্টির মানগুলি গ্রাফিক এডিটরগুলির প্রাথমিক মোডগুলির অনুরূপ।

সিনট্যাক্স

সিলেক্টর {
	mix-blend-mode: মান;
}

নিচের টেবিলে mix-blend-mode প্রপার্টির প্রধান মানগুলি উপস্থাপন করা হয়েছে:

মানসমূহ

মান	বর্ণনা
`normal`	সাধারণ। কোনো কালার ব্লেন্ডিং ব্যবহার করা হয় না। ডিফল্ট মোড।
`multiply`	গুণ। এই মোডে বেস কালারের মান ব্লেন্ড কালারের মান দ্বারা গুণ করা হয়। রেজাল্টিং কালার সবসময় একটি গাঢ় কালার হয়।
`screen`	স্ক্রিন। এই মোডে বেস এবং ব্লেন্ড কালারের বিপরীত মান গুণ করা হয়। রেজাল্টিং কালার হিসাবে সবসময় একটি হালকা কালার প্রয়োগ করা হয়।
`overlay`	ওভারলে। এই মোডে কালার গুণ বা স্ক্রিন করা হয় বেস কালারের উপর নির্ভর করে। প্যাটার্ন বা কালার বিদ্যমান পিক্সেলগুলিকে ওভারলে করে, বেস কালারের আলো এবং অন্ধকার অংশ অপরিবর্তিত রাখে।

উদাহরণ

দেখা যাক mix-blend-mode প্রপার্টির ডিফল্ট মান সহ একটি ইমেজ কেমন দেখাবে:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

উদাহরণ

এবং এখন ব্লেন্ড মোডটি গুণে পরিবর্তন করা যাক:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

উদাহরণ

mix-blend-mode প্রপার্টিটিকে ওভারলে মান সেট করা যাক:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

আরও দেখুন

background প্রপার্টি,
যা ব্যাকগ্রাউন্ডের জন্য একটি শর্টহ্যান্ড প্রপার্টি
background-image প্রপার্টি,
যার সাহায্যে একটি ব্লকে ব্যাকগ্রাউন্ড ইমেজ সেট করা যায়
background-blend-mode প্রপার্টি,
যার সাহায্যে ব্যাকগ্রাউন্ড ইমেজকে ব্যাকগ্রাউন্ড কালারের উপর ব্লেন্ড করা যায়