RGBA রঙ ফাংশন ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টে ট্রান্সপারেন্সি (পারদর্শিতা) যোগ করা যায়।
উদাহরণ: ট্রান্সপারেন্ট লিনিয়ার গ্রেডিয়েন্ট
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.linearGradient {
height: 200px;
background-image: linear-gradient(
to left,
rgb(111, 0, 255),
rgba(111, 0, 255, 0.616),
rgba(111, 0, 255, 0.384),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>ট্রান্সপারেন্সি সহ লিনিয়ার গ্রেডিয়েন্ট</h1>
<div class="linearGradient"></div>
<h2>উপরোক্ত গ্রেডিয়েন্ট সাদা থেকে গাড়ো নীল-বেগুনি পর্যন্ত</h2>
</body>
</html>
কোড ব্যাখ্যা
- to left: ডান থেকে বামে গ্রেডিয়েন্ট।
- rgba(111, 0, 255, alpha): alpha মান ১ থেকে ০ হলে পূর্ণ অপেক থেকে পূর্ণ ট্রান্সপেরেন্ট হয়।
- rgba(..., 0): শেষ স্টপ পুরোপুরি ট্রান্সপেরেন্ট।
ব্যবহার ক্ষেত্র
ইমেজ ওভারলে, ফেড-ইন/আউট ইফেক্ট, হিরো সেকশন ব্যাকগ্রাউন্ডে ব্যবহার করা হয়।
