ছবির অপাসিটি (Opasity) | সি এস এস বাংলা টিউটোরিয়াল

ছবির অপাসিটি (Opasity)

আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ।সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়।অপাসিটি নিয়ন্ত্রণের জন্য CSS এ ইন্টারনেট এক্সপ্লোরার-৯ সহ নতুন সকল ব্যাউজারের জন্য opacity প্রোপার্টি ব্যবহৃত হয়। যেমন opacity:0.5; । কিন্তু ইন্টারনেট এক্সপ্লোরার-৮ এর জন্য লেখতে হয় filter:alpha(opacity=50);। কোন ইমেজে op আইডি যুক্ত কোন ইমেজের জন্য যদি স্ট্যাইল শীটে লেখা হয় #op{opacity:0.5; filter:alpha(opacity=50);} তাহলে তা 50% স্বচ্ছ হয়ে যাবে এবং পেছনের ব্যকগ্রাউন্ড দেখা যাবে।


অনুশীলন প্রজেক্ট

<html>
<head>
<title> Gallery</title>
<style>
body{background:#fff;}
#op{opacity:0.5;
filter:alpha(opacity=50);}
</style>

</head>
<body>
<h1>সাধারণ ইমেজ</h1>
<img src="https://tutorialbd.com/css/example/gallery/1.jpg">
<h1> অপাসিটি 50% </h1>
<img id="op" src="https://tutorialbd.com/css/example/gallery/1.jpg">
</body>

</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।




লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত