কম্পিউটার টিউটোরিয়াল

CSS rgba() ফাংশন


rgba() রেড, গ্রিন, ব্লু এবং আলফা জন্য RGBA রং মান সংজ্ঞায়িত করে। Alpha হলো রংর আপসারতা অর্থাৎ ০.০ থেকে ১.০ এর মধ্যে একটি সংখ্যা। এখানে ১.০ সম্পূর্ণ অস্বচ্ছ।

উদাহরণ

rgba() ফাংশন বাস্তবায়ন উদাহরণ:

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 { background-color:rgba(108,111,35,0.6); font-size:30px; color:yellow; transform: rotate(45deg); }
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

আউটপুট

CSS rgba() ফাংশন

উদাহরণ

আরেকটি উদাহরণ:

<!DOCTYPE html>
<html>
<head>
<style>
span { background-color: rgba(100, 150, 50, 0.6); text-decoration: line-through; text-decoration-color: blue; }
.demo2 { text-decoration: underline; text-decoration-color: yellow; }
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

আউটপুট

CSS rgba() ফাংশন


  1. CSS linear-gradient() ফাংশন ব্যবহার

  2. CSS matrix() ফাংশন ব্যবহার

  3. CSS translate() ফাংশন দিয়ে এলিমেন্ট হরিজেন্টাল ও ভার্টিক্যাল সরানো

  4. RGBA ব্যবহার করে CSS ট্রান্সপারেন্সি