অঞ্জন দাস (American international univetsity)
আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ। সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়।
CSS এর মাধ্যমে সহজে স্বচ্ছ ইমেজ তৈরি করা। CSS এর অস্বচ্ছতা (Opacity) CSS 3 এর একটি একটি অংশ।
উদাহরণ 1 - একটি স্বচ্ছ ইমেজ তৈরি করাঃ
CSS 3 বৈশিষ্ট্য হল এর স্বচ্ছতা ও অস্বচ্ছতা। প্রথম আমরা কিভাবে CSS এর সঙ্গে একটি স্বচ্ছ ইমেজ তৈরি করতে হয় তা দেখব ।
নিয়মিত চিত্র:
Transparency তে একই চিত্র:
উদাহরণঃ
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
অপাসিটি নিয়ন্ত্রণের জন্য CSS এ ইন্টারনেট এক্সপ্লোরার-৯, ফায়ারফক্স, ক্রোম, অপেরা এবং সাফারি সহ নতুন সকল ব্যাউজারের জন্য opacity প্রোপার্টি ব্যবহৃত হয়। opacity প্রোপার্টি র মান 0.0 থেকে 1.0 গ্রহণ করতে পারে। IE8 এবং তার আগের ব্যাউজার filter:alpha(opacity=x) ব্যবহার করে। এর নিম্ন মান উপাদান আরো স্বচ্ছ করে তোলে।
উদাহরণ 2 - চিত্র ট্রান্সপারেন্সি এর হভার (Hover) প্রভাব
ইমেজ এর উপর মাউস রাখেন
উদাহরণঃ
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
এটি প্রথম CSS ব্লক উদাহরণ ১ এর অনুরূপ কোড। উপরন্তু, আমরা যখন ইমেজ এ hover ওভার asযোগ করবো। এই ক্ষেত্রে যদি স্বচ্ছ ইমেজ না চান তাহলে hover over রেখে দেখুন।
এই জন্য সিএসএস হল: opacity=1
IE8 এবং আগের জন্য filter:alpha(opacity=100)
যখন মাউস পয়েন্টার ইমেজ থেকে দূরে চলে আসে, তখন ইমেজ আবার স্বচ্ছ হতে পারে।
উদাহরণ 3 - Transparent বক্স-এর লেখাটি
উদাহরণঃ
<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); /* For IE8 and earlier */
}
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> element (class="background") এর সাথে একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি পার্শ্ব তৈরি করবো। তারপর আমরা <div> (class="transbox") তৈরি করবো । যার পাশে <div>. The <div class="transbox"> এ আগের পটভূমির রঙ এবং একটি স্বচ্ছ DIV সীমানা (bbBBBGGH4141444 border)rderr আছে। ভিতরের transparent <div> এ আমরা একটি <p> উপাদান ভিতরে কিছু লেখা যোগ করবো।
