সিএসএস(৩) opacity প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | opacity |
|---|---|---|---|---|---|
| opacity | ৪.০ | ৯.০ | ২.০ | ৩.১ | ৯.০ |
সংজ্ঞা ও ব্যবহার
opacity প্রোপার্টির মাধ্যমে একটি এলিমেন্টের অস্বচ্ছতা (opacity) লেভেল নির্ধারণ করা হয়।
opacity লেভেল ট্রান্সপারেন্সি লেভেলকে বর্ণনা করে, যেখানে ১ মানে কোন ট্রান্সপারেন্ট নেই। ০.৫ মানে ৫০% অস্বচ্ছ এবং ০ মানে সম্পূর্ণ অস্বচ্ছ।
পরামর্শঃ
- যখন একটি এলিমেন্টের ব্যাকগ্রাউন্ডে ট্রান্সপারেন্সি যুক্ত করার জন্য opacity প্রোপার্টি ব্যবহার করা হয়, তখন ঐ এলিমেন্টের সকল চাইল্ড এলিমেন্টেও ট্রান্সপারেন্ট যুক্ত হয়ে যায়। এটি একটি সম্পূর্ণ ট্রান্সপারেন্ট এলিমেন্টকে পড়তে কঠিন করে তুলতে পারে। যদি আপনি চাইল্ড এলিমেন্টের মধ্যে opacity ব্যবহার করতে না চান, তাহলে এর পরিবর্তে RGBA কালার ভ্যালু ব্যবহার করতে পারেন। (নিচের "আরো উদাহরণ" দেখুন)।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ১ | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
opacity: number/initial/inherit;
একটি <div> এলিমেন্টের জন্য opacity লেভেল নির্ধারণ করিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orangered;
opacity: 0.5;
filter: Alpha(opacity=50);
}
</style>
</head>
<body>
<div> এই এলিমেন্টের অপাসিটি 0.5! টেক্সট এবং ব্যাকগ্রাউন্ড-কালারের উপর অপাসিটির প্রভাব দেখা যায়!</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.opacity="0.5"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
width: 300px;
height: 150px;
background-color: teal;
border: 1px solid black;
}
#DIV2 {
position: relative;
top: 80px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
</style>
</head>
<body>
<p> "উদাহরণ দেখি" বাটন ক্লিক করলে প্রথম div এলিমেন্টটি দেখতে পাবেনঃ</p>
<button onclick="myFunction()">উদাহরণ দেখি</button>
<div id="DIV2">
<h1>আজিজ</h1>
</div>
<div id="myDIV">
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.opacity = "0.5";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #4CAF50;
padding: 10px;
}
div.first {
opacity: 0.1;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
div.second {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
div.third {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h2> ট্রান্সপারেন্ট বক্স</h2>
<p>div এলিমেন্টকে ট্রান্সপারেন্ট করলে সবগুলো চাইল্ড এলিমেন্ট স্বয়ংক্রিয়ভাবে ট্রান্সপারেন্ট হয়ে যায় :</p
<div class="first"><p>অপাসিটি 1</p></div>
<div class="second"><p> অপাসিটি 0.3</p></div>
<div class="third"><p>অপাসিটি 0.6</p></div>
<div><p>অপাসিটি 1 (ডিফল্ট)</p></div>
</body>
</html>
ফলাফল
যদি আপনি চাইল্ড এলিমেন্টের মধ্যে অপাসিটি ব্যবহার করতে না চান, তাহলে আমাদের উপরের উদাহরনের মত, RGBA কালার ভ্যালু ব্যবহার করুন। নিচের উদাহরণে শুধুমাত্র ব্যাকগ্রাউন্ডে opacity ব্যবহার করা হয়েছে কিন্ত টেক্সটে নয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(10, 115, 115);
padding: 10px;
}
div.first {
background: rgba(10, 115, 115, 0.1);
}
div.second {
background: rgba(10, 115, 115, 0.3);
}
div.third {
background: rgba(10, 115, 115, 0.6);
}
</style>
</head>
<body>
<h2> RGBA কালার ভ্যালুসহ ট্রান্সপারেন্ট বক্স</h2>
<div class="first"><p>১০% অপাসিটি </p></div>
<div class="second"><p>৩০% অপাসিটি</p></div>
<div class="third"><p>৬০% অপাসিটি</p></div>
<div><p>ডিফল্ট</p></div>
<p><b>নোটঃ</b> যখন অপাসিটি ব্যবহার করা হয়, তখন ব্যাকগ্রাউন্ড কালার পরিবর্তিত হয়। </p>
</body>
</html>
ফলাফল
টিপস: আমাদের সিএসএস(৩) কালার অধ্যায়ে RGBA কালার সম্পর্কে আরো ভালো ভাবে শিখতে পারবেন।
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি এলিমেন্টের opacity পরিবর্তন করা যায়:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="p1"> এই এলিমেন্টের অপাসিটি পরিবর্তন করতে নিম্নের তালিকা থেকে একটি মান নির্ধারন করুন</p>
<select onchange="myFunction(this);" size="5">
<option>0
<option>0.2
<option>0.5
<option>0.8
<option selected="selected">1
</select>
<script>
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
</script>
</body>
</html>
ফলাফল
opacity প্রোপার্টির ভ্যালু-সমূহ
- number - অস্বচ্ছতা নির্দিষ্ট করে। ০.০ (সম্পূর্ণ অস্বচ্ছ) থেকে ১.০(সম্পূর্ণ স্বচ্ছ)
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।