opacity প্রপার্টি একটি এলিমেন্টের অপাসিটি/স্বচ্ছতা নির্ধারণ করে।
opacity প্রপার্টি 0.0 - 1.0-এর মধ্যে একটি মান নিতে পারে। মান যত কম, ততই বেশি স্বচ্ছ:
মনে রাখবেন: IE8 এবং তার আগের ভার্সন filter:alpha(opacity=x) ব্যবহার করে। x 0 - 100-এর মধ্যে একটি মান নিতে পারে। কম মান এলিমেন্টকে আরও স্বচ্ছ করে তোলে।
img {
opacity: 0.5;
filter: alpha(opacity=50); /* IE8 এবং তার আগের ভার্সনের জন্য */
}opacity প্রপার্টি প্রায়ই :hover-এর সাথে ব্যবহার করা হয়
img {
opacity: 0.5;
filter: alpha(opacity=50); /* IE8 এবং তার আগের ভার্সনের জন্য */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* IE8 এবং তার আগের ভার্সনের জন্য */
}প্রথম CSS ব্লকটি উদাহরণ 1-এর কোডের মতোই। এছাড়াও, ব্যবহারকারী একটি ইমেজের উপর হোভার করলে কী হবে তা আমরা যোগ করেছি। এক্ষেত্রে আমরা চাই ব্যবহারকারী হোভার করলে ইমেজটি স্বচ্ছ না হোক। এর জন্য CSS হলো opacity:1;।
মাউস পয়েন্টার ইমেজ থেকে সরে গেলে, ইমেজটি আবার স্বচ্ছ হয়ে যাবে।
উল্টো হোভার ইফেক্টের একটি উদাহরণ:
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* IE8 এবং তার আগের ভার্সনের জন্য */
}একটি এলিমেন্টের ব্যাকগ্রাউন্ডে স্বচ্ছতা যোগ করতে opacity প্রপার্টি ব্যবহার করলে, এর সব চাইল্ড এলিমেন্ট
একই স্বচ্ছতা ইনহেরিট করে। এর ফলে একটি সম্পূর্ণ স্বচ্ছ এলিমেন্টের ভেতরের টেক্সট পড়া কঠিন হয়ে যেতে পারে:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div {
opacity: 0.3;
filter: alpha(opacity=30); /* IE8 এবং তার আগের ভার্সনের জন্য */
}উপরের আমাদের উদাহরণের মতো, চাইল্ড এলিমেন্টে opacity প্রয়োগ করতে না চাইলে, RGBA কালার মান ব্যবহার করুন। নিচের উদাহরণে টেক্সট নয়, ব্যাকগ্রাউন্ড কালারের জন্য opacity সেট করা হয়েছে:
100% opacity
60% opacity
30% opacity
10% opacity
আমাদের CSS রঙ চ্যাপ্টার থেকে আপনি শিখেছেন যে, RGB-কে একটি কালার মান হিসেবে ব্যবহার করা যায়। RGB-এর পাশাপাশি, আপনি একটি আলফা চ্যানেলসহ (RGBA) একটি RGB কালার মান ব্যবহার করতে পারেন - যা একটি রঙের অপাসিটি নির্ধারণ করে।
একটি RGBA কালার মান এভাবে নির্ধারণ করা হয়: rgba(red, green, blue, alpha)। alpha প্যারামিটার হলো 0.0 (সম্পূর্ণ স্বচ্ছ) থেকে 1.0 (সম্পূর্ণ অস্বচ্ছ) এর মধ্যে একটি সংখ্যা।
টিপস: আমাদের CSS রঙ চ্যাপ্টারে RGBA রঙ সম্পর্কে আরও জানবেন।
div {
background: rgba(76, 175, 80, 0.3) /* 30% opacity-সহ সবুজ ব্যাকগ্রাউন্ড */
}
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* IE8 এবং তার আগের ভার্সনের জন্য */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>প্রথমে, আমরা একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি বর্ডারসহ একটি <div> এলিমেন্ট (class="background") তৈরি করি। এরপর প্রথম <div>-এর ভেতরে আরেকটি <div> (class="transbox") তৈরি করি। <div class="transbox">-এর একটি ব্যাকগ্রাউন্ড কালার এবং একটি বর্ডার আছে - div-টি স্বচ্ছ। স্বচ্ছ <div>-এর ভেতরে, আমরা একটি <p> এলিমেন্টের ভেতরে কিছু টেক্সট যোগ করি।