CSS Opacity

CSS অস্বচ্ছতা:

সিএসএস অপাসিটি বৈশিষ্ট্য একটি উপাদানের স্বচ্ছতা নির্দিষ্ট করতে ব্যবহৃত হয়। সহজ কথায়, আপনি বলতে পারেন যে এটি চিত্রের স্বচ্ছতা নির্দিষ্ট করে।

প্রযুক্তিগত পরিভাষায়, অপাসিটি ডিগ্রী হিসাবে সংজ্ঞায়িত করা হয় যেখানে আলো একটি বস্তুর মধ্য দিয়ে ভ্রমণ করার অনুমতি দেয়।

কিভাবে CSS অপাসিটি সেটিং প্রয়োগ করবেন:

অপাসিটি সেটিং পুরো অবজেক্ট জুড়ে সমানভাবে প্রয়োগ করা হয় এবং অপাসিটি মান 1 এর কম ডিজিটাল মানের পরিভাষায় সংজ্ঞায়িত করা হয়। কম অপাসিটি মান বৃহত্তর অস্বচ্ছতা প্রদর্শন করে। অস্বচ্ছতা উত্তরাধিকারসূত্রে পাওয়া যায় না।

সিএসএস অপাসিটি উদাহরণ: স্বচ্ছ চিত্র:

আসুন চিত্রের স্বচ্ছতার একটি সাধারণ সিএসএস অপাসিটি উদাহরণ দেখি।

  1. <!DOCTYPE html>  
  2. </html>  
  3. <head>  
  4. <style>  
  5. img.trans {  
  6.     opacity: 0.4;  
  7.     filter: alpha(opacity=40); /* For IE8 and earlier */  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <p>Normal Image</p>  
  13. <img src=“rose.jpg” alt=“normal rose”>  
  14. <p>Transparent Image</p>  
  15. <img class=“trans” src=“rose.jpg” alt=“transparent rose”>  
  16. </body>  
  17. </html>  

আউটপুট:

সাধারণ চিত্র

স্বচ্ছ চিত্র

দ্রষ্টব্য 1: Chrome, Firefox, Opera, Safari, এবং IE9 স্বচ্ছতার জন্য অস্বচ্ছতা বৈশিষ্ট্য ব্যবহার করে। অস্বচ্ছতার মান 0.1 থেকে 1.0 পর্যন্ত। নিম্ন মান বৃহত্তর অস্বচ্ছতা তৈরি করে।

দ্রষ্টব্য 2: IE এর পুরানো সংস্করণগুলি ফিল্টার ব্যবহার করে: alpha(opacity=x)। এখানে x এর মান 0 থেকে 100 এর মধ্যে পরিবর্তিত হয়। নিম্ন মানটি বৃহত্তর অস্বচ্ছতা তৈরি করে।



Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top