সিএসএস ইমেজ অপসিটি - Css Image Opacity



সিএসএস এর মাধ্যমে খুব সহজেই transparent ইমেজ তৈরি করা যায়।



css image opacity example

transparent ইমেজ

সিএসএস ব্যবহার করে খুব সহজেই transparent ইমেজ, transparent ব্যাকগ্রাউন্ড বা কোন transparent স্টাইল তৈরি করা যায়। যদিও এটা কোন সিএসএস স্ট্যান্ডার্ড নয়, কিন্তু এটা সব আধুনিক ব্রাউজারই সমর্থন বা support করে এবং এটা W3C এর CSS 3 সমর্থিত।


transparent ইমেজ তৈরি

transparency এর জন্য ফায়ারফক্স opacity:x প্রপার্টি ব্যবহার করে। opacity:x প্রপার্টির মান বা value হতে পারে 0.0 থেকে 1.0 পর্যন্ত। ছবি বা image কে সবথেকে বেশী transparent করতে হলে সর্বনিম্ন মান ব্যবহার করতে হবে। transparency এর জন্য সিএসএস ৩ এর সিনট্যাক্স হল opacity:x প্রপার্টি।

transparency এর জন্য ইন্টারনেট এক্সপ্লোরার filter:alpha(opacity=x) প্রপার্টি ব্যবহার করে। opacity:x প্রপার্টির মান বা value হতে পারে 0 থেকে 100 পর্যন্ত। ছবি বা image কে সব থেকে বেশী transparent করতে হলে সর্বনিম্ন মান ব্যবহার করতে হবে।

নিচে একটি উদাহরন দেখুন -

কোড দেখুন

<img src="flower.jpg" width="140" height="140" alt="flower" style="opacity:0.5; filter:alpha(opacity=50)" />




উদাহরন - transparant text box

css image opacity example

এই রকম একটি transparant text box তৈরি করার জন্য নিচের কোডগুলো ব্যবহার করতে হবে। এখানে internal সিএসএস ব্যবহার করা হয়েছে, তবে সিএসএস এর সমস্ত কোডগুলো external সিএসএস এর মাধ্যমে ব্যবহার করা সম্ভব।
transparant টেক্সট বক্সের কোড দেখুন -

কোড দেখুন

<html>
<head>
<style type="text/css">
#transparant{
width:350px;
height:250px;
border:6px solid #bbbbbb;
background-image:url('../image/css-transparant-background.jpg');
}
#transparant-box{
width:250px;
height:150px;
margin:50px 0px 0px 0px;
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=45);
/* CSS3 standard */
opacity:0.45;
}
#transparant-box p{
text-align;
color:#222222;
}
</style>
</head>
<body>
<div id="transparant">
<div id="transparant-box">
<p>
css transparant image example
</p>
</div>
</div>
</body>
</html>


বর্ণনা - প্রথমে আমরা transparant নামে একটি div এলিমেন্ট তৈরি করেছি এবং যার width, height এবং background image নির্ধারণ করেছি।

তারপর আমরা transparant div এর মাঝে transparant-box নামে আরও একটি div তৈরি করেছি। এই div এর ব্যাকগ্রাউন্ডে transparency বা opcity নির্ধারণ করেছি।

ইন্টারনেট এক্সপ্লোরার এ প্রদর্শনের জন্য filter প্রপার্টি ব্যবহার করে এর মান বা valu নির্ধারণ করেছি alpha (opacity=45) এবং ফায়ারফক্স এ প্রদর্শনের জন্য "opacity" প্রপার্টি ব্যবহার করে তার মান বা value নির্ধারণ করেছি 0.45.







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.